Webpack 是目前前端開發最重要的構建工具。無論是自己的日常開發,還是準備面試,都應該掌握一些關于 Webpack 的優化技巧。
在這篇文章中,我將從三個方面分享一些我常用的技巧:
提高優化速度
壓縮打包文件的大小
改善用戶體驗。
01、線程加載器
多線程可以提高程序的效率,我們也可以在 Webpack 中使用。而thread-loader是一個可以在Webpack中啟用多線程的加載器。
安裝:
npm i thread-loader -D
配置:
{
test: /\.js$/,
use: [
'thread-loader',
'babel-loader'
],
}
02、緩存加載器
在我們的項目開發過程中,Webpack 需要多次構建項目。為了加快后續構建,我們可以使用緩存,與緩存相關的加載器是緩存加載器。
安裝:
npm i cache-loader -D
配置:
{
test: /\.js$/,
use: [
'cache-loader',
'thread-loader',
'babel-loader'
],
}
03、Hot update
當我們在項目中修改一個文件時,Webpack 默認會重新構建整個項目,但這并不是必須的。我們只需要重新編譯這個文件,效率更高,這種策略稱為Hot update。
Webpack 內置了Hot update插件,我們只需要在配置中開啟Hot update即可。
配置:
const webpack = require('webpack');
然后:
{
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
hot: true
}
}
04、exclude & include
在我們的項目中,一些文件和文件夾永遠不需要參與構建。所以我們可以在配置文件中指定這些文件,防止Webpack取回它們,從而提高編譯效率。
當然,我們也可以指定一些文件需要編譯。
exclude : 不需要編譯的文件
include : 需要編譯的文件
使用過濾方法的代碼幾乎相同,但使用方法會改變訪問模板內值的方式。但是,如果我們希望能夠將變量傳遞給過濾過程,那么就應該選擇方法這條路。
配置:
{
test: /\.js$/,
include: path.resolve(__dirname, '../src'),
exclude: /node_modules/,
use: [
'babel-loader'
]
}
減小打包文件的大小
05、縮小 CSS 代碼
css-minimizer-webpack-plugin 可以壓縮和去重 CSS 代碼。
安裝:
npm i css-minimizer-webpack-plugin -D
配置:
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')
和
optimization: {
minimizer: [
new CssMinimizerPlugin(),
],
}