vue编译速度优化

这是我参与更文挑战的第2天，活动详情查看：更文挑战

因近期前端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

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

优化前

优化后

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