维护公司一个项目的时候，发现在项目启动、热更新和打包项目的时候，时间长的“感人”。

当你改动项目的一些地方想要立即看到效果的时候，却发现热更新的编译过程却花了你很长时间，“心态崩了。。。”。

1、解决Vue项目热更新打包时间过长

解决方法：

1、使用html-webpack-plugin-for-multihtml插件

2、在build-webpack.dev.conf.js文件中

1
2
3
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 替换成
const HtmlWebpackPlugin = require('html-webpack-plugin-for-multihtml');

3、multihtmlCache:true 解决多页热部署的关键

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
for (var pathname in pages) {
  // 配置生成的html文件，定义路径等
  var conf = {
    filename: pathname + '.html',
    template: pages[pathname],   // 模板路径
    inject: true,              // js插入位置
    multihtmlCache: true,    // 解决多页热部署的关键 这里这里这里这里这里很重要！！！
    // necessary to consistently work with multiple chunks via CommonsChunkPlugin
    chunksSortMode: 'dependency'
  };

  if (pathname in devWebpackConfig.entry) {
    conf.chunks = ['manifest','vendor', pathname];
    conf.hash = false;
  }
  devWebpackConfig.plugins.push(new HtmlWebpackPlugin(conf));
}

4、router.js中使用路由懒加载

这时候再启动项目，热更新、编译和打包的速度会大大提升。

2、项目打包由4M变为1M

公司有一个H5微信公众号网页的项目，项目打包之后文件有4M；

修改webpack.prod.conf.js里的UglifyJsPlugin，这里的意思是打包后不产生后缀名为.map的文件。

1
2
3
4
5
6
7
8
9
10
webpack.prod.conf.js
    new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          warnings: false
        }
      },
      // sourceMap: config.build.productionSourceMap, 将这行代码注释掉。
      parallel: true
    })

处理后打包的文件的大小为1M