vue编译打包速度优化

    因近期前端vue项目采用jenkins进行自动化部署，导致开发时每次编译都需要花到4分钟到5分钟左右，于是在网上找了一个优化编译打包速度方法记录一下。

    根据网上的n种方法发现还是DLLPlugin 和 DLLReferencePlugin最有效果最直接，而且配置方式简单，DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，提升了构建的速度。

1、首先在config文件夹下配置webpack.dll.config.js(内容如下)，要打包的模块的数组可以将一些较大的依赖放进vendor中

 var path = require("path");
 var webpack = require("webpack");
 module.exports = {
     entry: {
        vendor: ['v-charts']
      },
     output: {
      path: path.join(__dirname, '../static/js'), // 打包后文件输出的位置
        filename:'[name].dll.js', // vendor.dll.js中暴露出的全局变量名。
        library:'[name]_library' // 与webpack.DllPlugin中的`name: '[name]_library',`保持一致。
       },
      plugins: [
        new webpack.DllPlugin({
        path: path.join(__dirname, '.', '[name]-manifest.json'),
          name:'[name]_library',
          context: __dirname
      }),  
]};

2、在package.json的scripts加上

"dll": "webpack --config build/webpack.dll.config.js"

image

3、运行npm run dll就可以生成vendor-manifest.json和vendor.dll.js

image

4、然后在index.html中引入vendor.dll.js

<script src="./static/js/vendor.dll.js"></script>

然后就可以正常的进行编译打包，会发现将更多的依赖放到vendor，打包速度越快

优化前

image

优化后

image

大概平均可以节省三分之一的时间。参考webpack中文网