记录一次webpack优化

项目打包优化

在新公司呆了差不多半个多月，这天突然领导给我说，我们有个项目打包和热更新都特别慢，你这边能优化一下吗？我心想，能有多慢呀。。。 然后我试了下，果然很慢，经过两天零零散散的工作，记录下自己的优化过程。

项目结构

vue-cli2  + webpack.config.js 

分析耗时过长的原因

首先要做优化一定要有一个量化的指标去进行对比，这里我使用的是speed-measure-webpack-plugin 插件

 使用方式：
 
 const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
 const smp = new SpeedMeasurePlugin();
 //   包裹配置项
 module.exports = smp.wrap(webpackConfig)

未做任何处理时的打包时间统计:

好家伙 怪不得说慢 开始优化吧

添加dllPlugin （缩小30s）

dll插件的简介 DllPlugin | webpack 中文网 (webpackjs.com)

我这边使用的是 autodll-webpack-plugin 插件来实现简单的构建

  const AutoDllPlugin = require('autodll-webpack-plugin');
  ​
  new AutoDllPlugin({
     inject: true, // 将构建好的
     path: './dll',
     entry: {
         vendor: [
             'vue',
             'vue-router',
             'vuex',
             'axios',
             'element-ui',
             'html2canvas',
             'jspdf',
         ]
     }
  }),

添加后打包时间

UglifyJsPlugin优化 (减少大概1分钟)

看到打包的过程中 UglifyJsPlugin 插件花费了较长的时间，搜索资料后发现加入 parallel & cache 配置，再修改unused为false 可优化

new UglifyJsPlugin({
      uglifyOptions: {
        compress: {
          drop_console: true,
          warnings: false,
          unused: false   //    https://zhuanlan.zhihu.com/p/27915962
        },
        output:{
          beautify:false,
          comments: false
        }
      },
      // sourceMap: config.build.productionSourceMap,
      parallel: true,
      cache: true   //  启用缓存
    }),

优化后耗时：

HtmlWebpackPlugin 优化 (减少15s左右)

这个项目是多页面项目，htmlwebpackplugin耗时也稍微有点长，通过在github上面搜索历史 issue 找到如下修改，需要修改htmlwebpackplugin项目源码。

• 修改方法 源码

优化Vue-loader，babel-loader (减少15s左右)

通过 cache-loader 和 babel-loader 自带的缓存功能进行缓存

• vue-loader 添加缓存

  {
      test: /.vue$/,
      use: [
         {loader: 'cache-loader'},
         {
            loader: 'vue-loader',
            options: vueLoaderConfig,
          }
      ],
     // loader: 'vue-loader',
     // options: vueLoaderConfig,
     include: [
        resolve('src'), 
        // resolve('test'), 
        // resolve('node_modules/webpack-dev-server/client')
     ],
     exclude: /node_modules/
  }
              
  

• babel-loader添加缓存

  {
     test: /.js$/,
     loader: 'babel-loader?cacheDirectory=true',
     include: [
       resolve('src'), 
       // resolve('test'), 
       // resolve('node_modules/webpack-dev-server/client')
     ],
     exclude: /node_modules/
  }
  

优化后耗时如下：

添加dynamic-import-node (减少大约2分钟30s )

在网上搜索热更新耗时过长时，看到有一个方案是在 .babelrc 配置中添加 dynamic-import-node， 需要安装 babel-plugin-dynamic-import-node 插件

 .babelrc文件

 "plugins": ["transform-vue-jsx", "transform-runtime", "dynamic-import-node"]

添加后打包时间大幅下降

dev-server可能会内存溢出 在命令行工具中输入以下代码

 set NODE_OPTIONS=--max_old_space_size=8172

写在最后

优化工作到这里就暂时告一段落了。其实这个项目里面业务的模块化没怎么做，许多公共的东西，组件都没有抽离，内部代码的优化也能减少打包时间，如果之后能够对这个项目进行改造，自己会补充改造后的耗时。