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"

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

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

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

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

优化前

优化后

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