H5W3
当前位置:H5W3 > 其他技术问题 > 正文

webpack多入口热加载很慢

项目是多入口(多页面),每次修改代码,热加载都很慢,定格在 94% asset optimization持续5秒左右,页面才更新内容。这个应该是webpack存在的问题。
我发现减少页面数量,热加载会明显相应的减少耗时。我怀疑每次修改内容会对全部代码进行某些检查或处理,从而增加了热加载完成的时间,但是找了很多资料还是没找到真正原因。
这是依赖版本号:

"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
"uglifyjs-webpack-plugin": "^1.1.1",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"hard-source-webpack-plugin": "^0.6.4",
"html-webpack-plugin": "^2.30.1",
"extract-text-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^4.0.1",

相应部分代码:

for (var pathname in pages) {
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname],
    inject: true
  };
  
  if (pathname in devWebpackConfig.entry) {
    conf.chunks = ['manifest', 'vendors', pathname];
    conf.hash = true;
  }
  
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

回答:

第一步:

npm i html-webpack-plugin-for-multihtml --save-dev

第二步:

需要把原来的
const HtmlWebpackPlugin = require(‘html-webpack-plugin’)
改成
const HtmlWebpackPlugin = require(“html-webpack-plugin-for-multihtml”)

然后添加 multihtmlCache 参数

plugins: [
    new HtmlWebpackPlugin({
      title: 'My App',
      filename: 'assets/admin.html',
      // ...
      multihtmlCache: true // 解决多页打包的关键!
    })
  ]

回答:

其实更多的原因还是由于项目依赖过多导致的,尤其是第三方依赖。

减少页面数量,相当于很大程度的减少了入口数量,也就是依赖的数量,所以会有明显的性能提升。

其实我也做过类似的处理,建议在热加载过程中,也加入dll plugin,提前将各种第三方依赖进行打包,能够明显的提升构建速度。

同时,你可以试用webpack watch模式,看下每次增量构建,都打包了哪些文件,对项目进行优化,避免不必要的打包。

回答:

在你开发首页的时候,其他不需要的页面可以不用载入,这样会快很多

var only = ['home', 'user'] // 只加载首页和用户模块
for (var pathname in pages) {
    var conf = {
        filename: pathname + '.html',
        template: pages[pathname],
        inject: true
    };

    if (pathname in devWebpackConfig.entry) {
        conf.chunks = ['manifest', 'vendors', pathname];
        conf.hash = true;
    }
    // 优化加载速度
    if (process.env.NODE_ENV !== 'production') {
        const canLoad = only.some(v => pathname.includes(v))
        if (canLoad) {
            devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
        }
    }
}

可以看我之前的配置https://segmentfault.com/a/11…

回答:

这是html-webpack-plugin插件的BUG,多页面打包多个html就会编译慢,gitbub上有人提出这问题,目前好像还没出能解决多页面慢的配置

回答:

等这个PR 合并吧:

https://github.com/jantimon/h…

回答:

webpack不适合做多页面项目;gulp会比较快;

回答:

请问 问题解决了吗

回答:

可以加一些本地开发的配置文件,如果是本地开发,不要读所有文件,直接走配置的白名单去生成 html

回答:

我用了webpack4 然后用了最新的版本的html-webpack-plugin 所以电影还是比较慢,你是如何解决的

本文地址:H5W3 » webpack多入口热加载很慢

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址