webpack打包優化點

• 2022 年 9 月 8 日
• 筆記

1. noParse

作用主要是過濾不需要解析的文件，比如打包的時候依賴了三方庫（jquyer、lodash）等，而這些三方庫裡面沒有其他依賴，可以通過配置noParse不去解析文件，提高打包效率。
是module中的一個屬性，設置一個正則表達式，過濾多個庫以|分割

module: {
  noParse: '/jquery|lodash/',
  // rules:[]
}

2. 包含和排除目錄

指定loader解析的規則，配置包含和排除目錄一般兩者寫其一就行。

{
  test: /\.js$/,
  use: {
     loader: 'babel-loader',
     options: {
       presets: ['@babel/preset-env'], // 預設，轉換js語法
          "plugins": [
              ["@babel/plugin-proposal-decorators", { "legacy": true }], // 解析類的裝飾器
              ["@babel/plugin-proposal-class-properties", { "loose": true }], // 解析類的屬性
              "@babel/plugin-transform-runtime", // 解析promise，Generator等新的API
          ]
       }
   },
  include: path.resolve(__dirname, 'src'),
  exclude: /node_modules/
}

3. IgnorePlugin

該插件是webpack的內置插件，用於忽略某些特定的模組，不被webpack打包進去。

在實際開發項目時，moment庫是非常常用的處理時間的庫，雖然設置了語種為中文zh-cn，但是在打包的時候，還是會將所有語言都打包進去。就導致包很大，打包速度慢，locale 目錄中存放的是多語種的語言包，不希望全部被打包進文件。此時就可以配置下IgnorePlugin

// src/index.js

import moment from 'moment'

// 忽略locale後，就必須手動單獨引入需要的語言包
import 'moment/locale/zh-cn';

moment.locale('zh-cn');  //設置中文
let r = moment().endOf('day').fromNow();
console.log(r);

// webpack.config.js
let Webpack = require('webpack');
module.exports = {
    plugins:[
        new Webpack.IgnorePlugin(/\.\/locale/,/moment/), // locale 目錄中存放的是多語種的語言包，不希望全部被打包進文件
    ]
}

4. happypack

多執行緒打包，多用於大型項目，因為在項目很小的時候，效果反而會慢，因為而分配執行緒，也會消耗時間。

npm install happypack

let HappyPack = require('happypack');

module.exports = {
    // ...
    module:{
        rules:[
            {
                test:/\.js$/,
                use:'HappyPack/loader?id=js' //  id=js  代表打包js
            },
            {
                test:/\.css$/,
                use:'HappyPack/loader?id=css' // id=css 代表打包css
            }
        ]
    },
    plugins:[
        new HappyPack({ 
            id:'css', // 打包css
            use:['style-loader','css-loader']
        }),
        new HappyPack({ 
            id:'js', // 打包js
            use:[{ // 原本rules中 loader的配置即可
                loader:'babel-loader',
                options:{
                    presets:['@babel/presets-env', '@babel/presets-react']
                }
            }]
        })
    ]
}

5. DllPlugin動態鏈接庫

之前專門整理過完整的一篇關於DllPlugin動態鏈接庫的學習筆記，由於時間和精力的關係，不在贅述，感興趣的同學可以跳轉鏈接了解一下。
webpack性能優化方式之dll--- webpack.dll.config.js

6. 熱更新

之前專門整理過完整的一篇關於webpack熱更新的學習筆記，由於時間和精力的關係，不在贅述，感興趣的同學可以跳轉鏈接了解一下。
webpack4.15.1 學習筆記(三) — 模組熱替換HMR

7. 開發環境 tree-shaking

之前專門整理過完整的一篇關於webpack tree-shaking的學習筆記，由於時間和精力的關係，不在贅述，感興趣的同學可以跳轉鏈接了解一下。
webpack4.15.1 學習筆記(四) — Tree shaking

8. 抽離公共程式碼

之前專門整理過完整的一篇關於webpack抽離公共程式碼的學習筆記，由於時間和精力的關係，不在贅述，感興趣的同學可以跳轉鏈接了解一下。
webpack4.15.1 學習筆記(六) — 程式碼拆分(Code Splitting)

9. 懶載入

之前專門整理過完整的一篇關於webpack懶載入的學習筆記，由於時間和精力的關係，不在贅述，感興趣的同學可以跳轉鏈接了解一下。
webpack4.15.1 學習筆記(七) — 懶載入(Lazy Loading)