webpack優化主要有三個方面：1.提高構建速度，2.減少打包體積，3.優化用戶體驗
提高構建速度：
-
啟用多執行緒
thread-loader
使用thread-loader插件可以啟用多執行緒進行構建， -
使用快取
cache-loader
使用cache-loader插件可以對構建進行快取，加快后續的構建速度， -
熱更新
熱更新只更新改動的代碼檔案，無需編譯整個專案， -
exclude&include
exclude選項是構建時忽略的檔案，include選項是構建時需要構建的檔案，配置好exclude和include，可以避免對不必要的檔案進行構建，
減少打包體積
-
壓縮css代碼
css-minimizer-webpack-plugin -
壓縮js代碼
terser-webpack-plugin -
tree-shaking
tree-shaking就是只編譯需要的代碼，
webpack5該特性默認啟用， -
source-map
source-map幫助在源代碼中定位bug，
開發模式使用更精確但體積更大的source-map
module.exports = {
mode: 'development',
devtool: 'eval-cheap-module-source-map'
}
生產模式使用體積小但不那么精確的source-map
module.exports = {
mode: 'production',
devtool: 'nosources-source-map'
}
- 打包分析
webpack-bundle-analyzer插件可以看到各個檔案的打包大小，幫助對對應的檔案進行優化
優化用戶體驗
- 延遲加載模塊
在vue中，用下面箭頭函式的方式引入模塊，就可以按需加載模塊，react的延遲加載和vue類似，angular也有自己的延遲加載方式，
// src/router/index.js
const routes = [
{
path: '/login',
name: 'login',
component: login
},
{
path: '/home',
name: 'home',
// lazy-load
component: () => import('../views/home/home.vue'),
},
]
-
Gzip
最常見的壓縮檔案的演算法，可以在網路傳輸中壓縮資料，加快傳輸速度，需要后端的配合，
插件 compression-webpack-plugin -
base64
小圖片可以轉成base64嵌進代碼中，減少http請求數量，
插件 asset-module -
hash
如下配置可以給打包檔案加上hash后綴，生成hash后綴管理瀏覽器快取，只要檔案名和之前不同，瀏覽器就會向服務端重新請求檔案，反之，瀏覽器會從協商快取中讀取檔案，重新部署了專案，檔案名稱未修改，客戶端不一定能獲取到最新的代碼，
webpack會自動更改有改動的打包檔案的hash后綴，可以自動實作檔案的快取管理，
output: {
path: path.resolve(__dirname, '../dist'),
filename: 'js/chunk-[contenthash].js',
clean: true,
},
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/538208.html
標籤：其他