13個你應(yīng)該知道的 Webpack 優(yōu)化技巧
在這篇文章中，我將從三個方面分享一些我常用的技巧：
- 提高優(yōu)化速度
- 壓縮打包文件的大小
- 改善用戶體驗。
提高速度
1、線程加載器
多線程可以提高程序的效率，我們也可以在 Webpack 中使用。而thread-loader是一個可以在Webpack中啟用多線程的加載器。
安裝：
npm i thread-loader -D
配置：
{
test: /\.js$/,
use: [
'thread-loader',
'babel-loader'
],
}2、緩存加載器
在我們的項目開發(fā)過程中，Webpack 需要多次構(gòu)建項目。為了加快后續(xù)構(gòu)建，我們可以使用緩存，與緩存相關(guān)的加載器是緩存加載器。
安裝：
npm i cache-loader -D
配置：
{
test: /\.js$/,
use: [
'cache-loader',
'thread-loader',
'babel-loader'
],
}3、Hot update
當(dāng)我們在項目中修改一個文件時，Webpack 默認(rèn)會重新構(gòu)建整個項目，但這并不是必須的。我們只需要重新編譯這個文件，效率更高，這種策略稱為Hot update。
Webpack 內(nèi)置了Hot update插件，我們只需要在配置中開啟Hot update即可。
配置：
// import webpack
const webpack = require('webpack');
然后：
{
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true
}
}4、exclude & include
在我們的項目中，一些文件和文件夾永遠(yuǎn)不需要參與構(gòu)建。所以我們可以在配置文件中指定這些文件，防止Webpack取回它們，從而提高編譯效率。
當(dāng)然，我們也可以指定一些文件需要編譯。
exclude : 不需要編譯的文件
include : 需要編譯的文件
配置：
{
test: /\.js$/,
include: path.resolve(__dirname, '../src'),
exclude: /node_modules/,
use: [
'babel-loader'
]
}減小打包文件的大小
5、縮小 CSS 代碼
css-minimizer-webpack-plugin 可以壓縮和去重 CSS 代碼。
安裝：
npm i css-minimizer-webpack-plugin -D
配置：
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
和
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
}
6、縮小 JavaScript 代碼
terser-webpack-plugin 可以壓縮和去重 JavaScript 代碼。
安裝：
npm i terser-webpack-plugin -D
配置：
const TerserPlugin = require('terser-webpack-plugin')
optimization: {
minimizer: [
new CssMinimizerPlugin(),
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // remove console statement
},
},
}),
],
}
7、tree-shaking
tree-shaking 就是：只編譯實際用到的代碼，不編譯項目中沒有用到的代碼。
在 Webpack5 中，默認(rèn)情況下會啟用 tree-shaking。我們只需要確保在最終編譯時使用生產(chǎn)模式。
module.exports = {
mode: 'production'
}
8、source-map
當(dāng)我們的代碼出現(xiàn)bug時，source-map可以幫助我們快速定位到源代碼的位置。但是這個文件很大。
為了平衡性能和準(zhǔn)確性，我們應(yīng)該：在開發(fā)模式下生成更準(zhǔn)確（但更大）的 source-map；在生產(chǎn)模式下生成更小（但不那么準(zhǔn)確）的源映射。
開發(fā)模式：
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map'
}
生產(chǎn)方式：
module.exports = {
mode: 'production',
devtool: 'nosources-source-map'
}
9、Bundle Analyzer
我們可以使用 webpack-bundle-analyzer 來查看打包后的 bundle 文件的體積，然后進(jìn)行相應(yīng)的體積優(yōu)化。
安裝：
npm i webpack-bundle-analyzer -D
配置：
const {
BundleAnalyzerPlugin
} = require('webpack-bundle-analyzer')
// config
plugins: [
new BundleAnalyzerPlugin(),
]
改善用戶體驗
10、模塊延遲加載
如果模塊沒有延遲加載，整個項目的代碼會被打包成一個js文件，導(dǎo)致單個js文件體積非常大。那么當(dāng)用戶請求網(wǎng)頁時，首屏的加載時間會更長。
使用模塊懶加載后，大js文件會被分割成多個小js文件，加載時網(wǎng)頁按需加載，大大提高了首屏的加載速度。
要啟用延遲加載，我們只需要編寫如下代碼：
// src/router/index.js
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
// lazy-load
component: () => import('../views/home/home.vue'),
},
]
11、壓縮包
Gzip是一種常用的文件壓縮算法，可以提高傳輸效率。但是，此功能需要后端配合。
安裝：
npm i compression-webpack-plugin -D
配置：
const CompressionPlugin = require('compression-webpack-plugin')
// config
plugins: [
// gzip
new CompressionPlugin({
algorithm: 'gzip',
threshold: 10240,
minRatio: 0.8
})
]
12、base64
對于一些小圖片，可以轉(zhuǎn)成base64編碼，這樣可以減少用戶的HTTP請求次數(shù)，提升用戶體驗。url-loader 在 webpack5 中已被棄用，我們可以使用 assets-module 代替。
配置：
{
test: /\.(png|jpe?g|gif|svg|webp)$/,
type: 'asset',
parser: {
// Conditions for converting to base64
dataUrlCondition: {
maxSize: 25 * 1024, // 25kb
}
},
generator: {
filename: 'images/[contenthash][ext][query]',
},
},13、正確配置哈希
我們可以將哈希添加到捆綁文件中，這樣可以更輕松地處理緩存。
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/chunk-[contenthash].js',
clean: true,
},
以上就是我跟你分享的13個關(guān)于Webpack的技巧，希望對你有用。
結(jié)論
最后，我們可以通過以下這張思維導(dǎo)圖來總結(jié)。
