優化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打包就能夠打包了