由于建立項目發版打包時間大概需要
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
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
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
通過
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
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
等優化方式。
其他總結文章：
- 背景管理項目總結
- 元件通信處理方案