优化vue-cli2的构建速度

简介：

DLLPlugin 和 DLLReferencePlugin 用某种方法实现了拆分 bundles，同时还大大提升了构建的速度

详情请看：https://www.webpackjs.com/plugins/dll-plugin/

它的作用就是把项目中的依赖和代码分开来打包，在依赖没有变更的情况下项目的编译打包不需要再重复的编译打包依赖的部分，从而加快了打包的速度，同时也可以解决同一个依赖被重复多次打包的情况导致的项目臃肿的问题

建议只抽离项目公用的依赖，以免生成的vendor.dll.js文件过大，影响首页的加载速度

 

具体配置操作如下：

第一步：打包依赖

先安装两个插件npm i assets-webpack-plugin clean-webpack-plugin --save -dev

然后在build目录下添加webpack.dll.conf.js配置文件，具体配置内容如下：

var path = require('path')

var webpack = require('webpack')

var AssetsPlugin = require('assets-webpack-plugin')  // 用于给vendor.dll.js名称添加动态哈希数字，解决更新vendor.dll.js时的缓存问题

var CleanWebpackPlugin = require('clean-webpack-plugin') // 用于更新vendor.dll.js前清除旧的vendor.dll.js


module.exports = {

　　entry: {

　　　　vendor: ['vue','vuex','vue-router',...]  // 需要打包的依赖名称数组

　　}，

　　output： {

　　　　path: path.join(__dirname, '../static/js'), // 打包后文件的输出位置，建议放在static目录下，运行npm run build打包的时候可以被直接复制到dist目录中，免去了手动复制的麻烦

　　　　filename: '[name]_[hash:6].dll.js',  // 打包后文件的名称

　　　　library: '[name]_[hash_6]_library'  // vendro.dll.js中暴露的全局变量名，主要是给DllPlugin中的name用，需与DllPlugin中的name一致

　　}，

　　plugins: [

　　　　new CleanWebpackPlugin(['static/js'], {  // 清除文件路径

　　　　　　root: path.resolve(__dirname, '../')　// 清除文件根路径

　　　　}),

　　　　new AssetsPlugin({

　　　　　　filename: 'bundle-conf.json',  // 生成文件名称

　　　　　　path: __dirname  // 生成文件路径

　　　　　}),

　　　　new webpack.DllPlugin({

　　　　　　path: path.join(__dirname, '.', '[name]-manifest.json'), // 生成vendor.dll.js文件的路径

　　　　　　name: '[name]_[hash:6]_library',  // 同output中的library

　　　　}),

　　　　new webpack.optimize.UglifyJsPlugin({ // 压缩打包的文件

　　　　　　compress: {

　　　　　　　　warning: false

　　　　　　}

　　　　})

　　]

}

最后在package,json的“script”属性中添加：

“build:dll”: "webpack --config build/webpack.dll.conf.js"

运行npm run build:dll

可以看到static/js下面生成了依赖文件vendor.dll.js

第二步：引用依赖

1.在webpack配置中引入需要的预编译的依赖：

在build/webpack.base,conf.js的“plugins”属性中添加插件：

new webpack.DllReferencePlugin({

　　manifest: require('./vendor-manifest.json')

　})

2.在index.html中引入依赖文件

在build/webpack.prod.conf.js和build/webpack.dev.conf.js中引入bundle-conf.json文件，用于获取生成的vendor.dll.js文件路径

var CommonsPkg = require('./bundle-conf.json')

然后给HtmlWebpackPlugin插件添加bundleName属性，用于为首页提供依赖的路径变量

/webpack.dev.conf.js：bundleName: `${config.dev.assetsPublicPath}static/js/${CommonsPkg.vendor.js}`

webpack.prod.conf.js： bundleName: `${config.build.assetsPublicPath}static/js/${CommonsPkg.vendor.js}`

最后在index.html中引入依赖文件：

<script src="<%= htmlWebpackPlugin.options.bundleName%>"></script>

到这里配置就全部完成了，运行npm run build打包就可以打包了