由於新建專案發版打包時間大概需要30分鐘，發版時嚴重拖慢下班時間，所以特意檢視了相關文件來優化打包速度，爭取早點下班，^_^。
分析打包檔案
要優化，先分析。我們先要知道到底是哪裡拖慢我們的打包速度呢？
打包後生成檔案分析
可以利用webpack-bundle-analyzer外掛來分析我們打包後生成的檔案
- 安裝
npm i webpack-bundle-analyzer -D
複製程式碼- 使用
修改webpack.prod.conf.js檔案
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
// 構建完成後，瀏覽器會自動開啟localhost:8080
webpackConfig.plugins.push(
new BundleAnalyzerPlugin({
analyzerPort: 8080,
generateStatsFile: false
})
)
複製程式碼
通過圖片可以看到打包後檔案的具體資訊
打包進度條顯示，可以檢視到打包進度百分比
simple-progress-webpack-plugin可以顯示打包百分比
- 安裝
npm i simple-progress-webpack-plugin -D
複製程式碼- 使用
修改webpack.prod.conf.js檔案
const SimpleProgressWebpackPlugin = require( 'simple-progress-webpack-plugin' )
...
plugins: [
new SimpleProgressWebpackPlugin()
]
...
複製程式碼效果如下：
資源與依賴包的控制
通過上面進度可以看到，打包過程中，卡頓在壓縮的地方過長，當專案越來越臃腫的時候，我們要需要對專案靜態資源以及依賴包進行整理，
-
圖片過大的可以壓縮，這裡推薦一個還不錯的壓縮連結
-
專案中沒有使用的依賴可以刪除，可以按需引用的依賴，按需引用
專案裡面使用ElementUI和Echarts都是全部引用掛在Vue.prototype上，現都改為按需引用。
減少檔案搜尋範圍
- 設定
resolve.alias欄位，避免打包時如果使用相對路徑訪問或著import檔案時會層層去查詢解析檔案
resolve: {
alias: {
'@': resolve('src')
}
}
複製程式碼- 合理配置
extensions副檔名
resolve.extensions能夠自動解析確定的擴充套件，但是如果extensions副檔名過多，會導致解析過程過多，所以我們要合理配置副檔名，不要過多配置副檔名，專案引用多的檔案，副檔名放在前面，我司專案中多的是vue，js檔案，可以只引用這兩種。
resolve: {
extensions: ['.vue', '.js']
}
複製程式碼loader預處理檔案增加include匹配特定條件
預處理各種檔案時指定匹配目錄後，webpack解析檔案時就不會迴圈查詢其他目錄，加快解析速度。
happypack多執行緒執行
webpack執行預處理檔案時單執行緒的，我們可以使用happypack來多執行緒處理檔案。
- 安裝
npm i happypack -D
複製程式碼- 使用
修改webpack.base.js檔案
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });
module: {
rules: [
{
test: /\.js$/,
loader: 'happypack/loader?id=babel', // 原始loader替換成`happypack/loader`
include: [resolve('src')]
}
]
},
plugins: [
new HappyPack({
// id標識 需要處理的loader
id: 'babel',
// loader配置和原始配置一樣
loaders: [
{
loader: 'babel-loader',
options: {
presets: ['es2015'],
cacheDirectory: true
}
}
],
threadPool: happyThreadPool
})
]
複製程式碼babel-plugin-dynamic-import-node非同步載入
babel-plugin-dynamic-import-node外掛是使import() 替換成 require 編譯
- 安裝
npm i babel-plugin-dynamic-import-node -D
複製程式碼- 使用
修改.babelrc 檔案
"env": {
"development": {
"plugins": ["dynamic-import-node"]
},
"production": {
"plugins": ["dynamic-import-node"]
}
}
複製程式碼注意：使用外掛build後沒有chunk files檔案。
DllPlugin分包
通過DllPlugin外掛分離出第三方包
- 新建
webpack.dll.conf.js
const path = require('path');
const webpack = require('webpack');
const CleanWebpackPlugin = require("clean-webpack-plugin");
module.exports = {
entry: {
vendor: [
'vue',
'vue-router',
'vuex',
'axios',
'element-ui',
'echarts'
]
},
output: {
filename: '[name]_dll_[hash:6].js', // 產生的檔名
path: path.resolve(__dirname, '../static/dll'),
library: '[name]_dll_[hash:6]'
},
plugins: [
new CleanWebpackPlugin({
root: path.resolve(__dirname, '../static/dll'),
dry: false // 啟用刪除檔案
}),
new webpack.DllPlugin({
name: '[name]_dll_[hash:6]',
path: path.resolve(__dirname, '../static/dll', '[name].dll.manifest.json')
})
]
};
複製程式碼- 修改
webpack.prod.conf.js
使用add-asset-html-webpack-plugin動態新增dll.js到html。
需要注意
-
add-asset-html-webpack-plugin要在HtmlWebpackPlugin後引入； -
html-webpack-plugin依賴包版本4.0.0-alpha會出個問題，新增上去的路徑會變成undefined需要是3.2.0版本
const AddAssetHtmlPlugin = require('add-asset-html-webpack-plugin');
...
plugins: [
// 插入dll json
new webpack.DllReferencePlugin({
context: path.join(__dirname),
manifest: require('../static/dll/vendor.dll.manifest.json')
}),
new HtmlWebpackPlugin(),
// 插入 dll js
new AddAssetHtmlPlugin([{
publicPath: config.build.assetsPublicPath + 'static/dll/', // 注入到html中的路徑
outputPath: 'static/dll/', // 輸出檔案目錄
filepath: resolve('static/dll/*.js'), // 檔案路徑
includeSourcemap: false,
typeOfAsset: "js"
}])
]
複製程式碼總結
專案經過以上優化，打包從30分鐘，到2分鐘不到，整體還有優化空間，可以使用其他cdn等優化方式。
其他總結文章：