作者：京東科技 牛志偉
近期對Webpack5構建性能進行了優化，構建耗時從150s到60s再到10s，下面詳細講解下優化程序，
優化前現狀
1.歷史專案基于Vue3 + Webpack5技術堆疊，其中webpack配置項由開發者自己維護（沒有使用@vue/cli-service），并且做了環境分離，
2.專案體量大約5000個modules左右，每次本地構建build時耗時約150s左右，
優化細節
環境分離
之前已經設計了環境分離，但是一些優化細節沒有處理好：
?基礎組態檔：webpack.base.js，主要配置了基礎的loader和plugin等
?本地開發組態檔：webpack.dev.js，主要配置了devServer和樣式、圖片資源loader等，并merge基礎配置
?生產環境組態檔：webpack.prod.js，主要配置了樣式、圖片資源loader以及資源壓縮和樣式抽離等，并merge基礎配置
優化點：
?熱加載相關配置，從base移到dev配置中，生產環境中不需要熱更新
new webpack.HotModuleReplacementPlugin()
?dev配置中devtool型別選擇，inline-source-map修改為eval-cheap-module-source-map，map檔案使用行內方式構建速度更快，
devtool: 'eval-cheap-module-source-map'
?filename調整：js/[name].[fullhash].js去掉hash，本地開發環境啟用熱更新，不需要hash（生產環境需要hash重繪快取）
output: {
filename: 'js/[name].js',
path: path.resolve(__dirname, '../dist'),
publicPath: '/',
}
持久化快取
base配置中開啟持久化快取（Webpack5新特性），首次構建耗時增加15%左右，但是二次構建耗時減少90%左右
cache: {
type: 'filesystem'
}
Loader相關優化
?盡量減少loader，比如使用Asset modules（Webpack5新特性）替換url-loader、file-loader、raw-loader
// 字體和小于8kb的圖片
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 8 * 1024,
},
}
}
// 圖片資源
{
test: /\.(png|svg|jpg|gif|cur)$/,
type: 'asset/resource',
exclude: [path.resolve(__dirname, '../../../assets/svg')],
}
?thread-loader耗時任務開啟多執行緒
{
test: /\.vue$/,
use: ['thread-loader', 'vue-loader'],
},
{
test: /\.(t|j)s$/,
exclude: /node_modules/,
use: ['thread-loader', 'babel-loader'],
},
{
test: /\.(sa|sc|c)ss$/,
use: ['thread-loader', 'style-loader', 'css-loader', 'sass-loader'
},
?esbuild-loader替換babel-loader（由于改動較大，沒有嘗試）
Plugin相關優化
?使用speed-measure-webpack-plugin分析各個plugin、loader編譯時間
?盡量減少plugin，比如HotModuleReplacementPlugin只在dev開啟
?升級老舊plugin，比如terser-webpack-plugin版本從2升級到5，構建性能直接提升50%左右，具體原因有了解的同學可以打在評論區，
優化后效果
?不啟用快取情況下耗時從150s減少到60s以內
?優化后speed-measure-webpack-plugin編譯速度分析
?啟用持久化快取情況下，二次構建減少到10s以內
Webpack5總結
以下是從基礎、進階、優化、插件使用以及打包原理幾個方面做的Webpack5總結，有遺漏之處歡迎評論留言討論
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/552257.html
標籤：其他
上一篇：Layui+dtree實作左邊分類串列，右邊資料串列
下一篇：返回列表