一、前言

從 0 到 1 學習的朋友可參考前置學習文章：

學習 Webpack5 之路（基礎篇）
學習 Webpack5 之路（實踐篇）

前置文章學習 Webpack5 之路（基礎篇）對 webpack 的概念做了簡單介紹，學習 Webpack5 之路（實踐篇）則從配置著手，用 webpack 搭建了一個 SASS + TS + React 的專案，

本篇將從優化開發體驗、加快編譯速度、減小打包體積、加快加載速度 4 個角度出發，介紹如何對 webpack 專案進行優化，

本文依賴的 webpack 版本資訊如下：

二、優化效率工具

在優化開始之前，需要做一些準備作業，

安裝以下 webpack 插件，幫助我們分析優化效率：

progress-bar-webpack-plugin：查看編譯進度；
speed-measure-webpack-plugin：查看編譯速度；
webpack-bundle-analyzer：打包體積分析，

1. 編譯進度條

一般來說，中型專案的首次編譯時間為 5-20s，沒個進度條等得多著急，通過 progress-bar-webpack-plugin 插件查看編譯進度，方便我們掌握編譯情況，

安裝：

npm i -D progress-bar-webpack-plugin

webpack.common.js 配置方式如下：

const chalk = require("chalk");
const ProgressBarPlugin = require("progress-bar-webpack-plugin");
module.exports = {
  plugins: [
    // 進度條
    new ProgressBarPlugin({
      format: `  :msg [:bar] ${chalk.green.bold(":percent")} (:elapsed s)`,
    }),
  ],
};

貼心的為進度百分比添加了加粗和綠色高亮態樣式，

包含內容、進度條、進度百分比、消耗時間，進度條效果如下：

2. 編譯速度分析

優化 webpack 構建速度，首先需要知道是哪些插件、哪些 loader 耗時長，方便我們針對性的優化，

通過 speed-measure-webpack-plugin 插件進行構建速度分析，可以看到各個 loader、plugin 的構建時長，后續可針對耗時 loader、plugin 進行優化，

安裝：

npm i -D speed-measure-webpack-plugin

webpack.dev.js 配置方式如下：

const SpeedMeasurePlugin = require("speed-measure-webpack-plugin");
const smp = new SpeedMeasurePlugin();
module.exports = smp.wrap({
  // ...webpack config...
});

包含各工具的構建耗時，效果如下：

注意：這些灰色文字的樣式，是因為我在 vscode 終端運行的，導致有顏色的字體都顯示為灰色，換個終端就好了，如 iTerm2，

3. 打包體積分析

同樣，優化打包體積，也需要先分析各個 bundle 檔案的占比大小，來進行針對優化，

使用 webpack-bundle-analyzer 查看打包后生成的 bundle 體積分析，將 bundle 內容展示為一個便捷的、互動式、可縮放的樹狀圖形式，幫助我們分析輸出結果來檢查模塊在何處結束，

安裝：

npm i -D webpack-bundle-analyzer

webpack.prod.js 配置方式如下：

const BundleAnalyzerPlugin =
  require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
  plugins: [
    // 打包體積分析
    new BundleAnalyzerPlugin(),
  ],
};

包含各個 bundle 的體積分析，效果如下：

三、優化開發體驗

1. 自動更新

自動更新指的是，在開發程序中，修改代碼后，無需手動再次編譯，可以自動編譯代碼更新編譯后代碼的功能，

webpack 提供了以下幾種可選方式，實作自動更新功能：

webpack's Watch Mode
webpack-dev-server
webpack-dev-middleware

webpack 官方推薦的方式是 webpack-dev-server，在學習 Webpack5 之路（實踐篇） - DevServer 章節已經介紹了 webpack-dev-server 幫助我們在代碼發生變化后自動編譯代碼實作自動更新的用法，在這里不重復贅述，

這是針對開發環境的優化，修改 webpack.dev.js 配置，

2. 熱更新

熱更新指的是，在開發程序中，修改代碼后，僅更新修改部分的內容，無需重繪整個頁面，

2.1 修改 webpack-dev-server 配置

使用 webpack 內置的 HMR 插件，更新 webpack-dev-server 配置，

webpack.dev.js 配置方式如下：

module.export = {
  devServer: {
    contentBase: "./dist",
    hot: true, // 熱更新
  },
};

2.2 引入 react-refresh-webpack-plugin

使用 react-refresh-webpack-plugin 熱更新 react 組件，

安裝：

npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh

webpack.dev.js 配置方式如下：

const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin");

module.exports = {
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new ReactRefreshWebpackPlugin(),
  ],
};

遇到的問題：

配置了 SpeedMeasurePlugin 后，熱更新就無效了，會提示 runtime is undefined，

解決方案：

僅在分析構建速度時打開 SpeedMeasurePlugin 插件，這里我們先關閉 SpeedMeasurePlugin 的使用，來查看熱更新效果，

最終效果：

更新 react 組件代碼時，無需重繪頁面，僅更新組件部分，

四、加快構建速度

1. 更新版本

1.1 webpack 版本

使用最新的 webpack 版本，通過 webpack 自身的迭代優化，來加快構建速度，

這一點是非常有效的，如 webpack5 較于 webpack4，新增了持久化快取、改進快取演算法等優化，webpack5 新特性可查看參考資料，

1.2 包管理工具版本

將 Node.js 、package 管理工具（例如 npm 或者 yarn）更新到最新版本，也有助于提高性能，較新的版本能夠建立更高效的模塊樹以及提高決議速度，

本文依賴的版本資訊如下：

2. 快取

2.1 cache

通過配置 webpack 持久化快取 cache: filesystem，來快取生成的 webpack 模塊和 chunk，改善構建速度，

簡單來說，通過 cache: filesystem 可以將構建程序的 webpack 模板進行快取，大幅提升二次構建速度、打包速度，當構建突然中斷，二次進行構建時，可以直接從快取中拉取，可提速 90% 左右，

webpack.common.js 配置方式如下：

module.exports = {
  cache: {
    type: "filesystem", // 使用檔案快取
  },
};

引入快取后，首次構建時間將增加 15%，二次構建時間將減少 90%，效果如下：

2.2 dll ?

在 webpack 官網構建性能中看到關于 dll 的介紹：

dll 可以為更改不頻繁的代碼生成單獨的編譯結果，可以提高應用程式的編譯速度，

我興沖沖的開始尋找 dll 的相關配置說明，太復雜了，接著找到了一個輔助配置 dll 的插件 autodll-webpack-plugin，結果上面直接寫了 webpack5 開箱即用的持久快取是比 dll 更優的解決方案，

所以，不用再配置 dll 了，上面介紹的 cache 明顯更香，

2.3 cache-loader ?

沒錯，cache-loader 也不需要引入了，上面的 cache 已經幫助我們快取了，

3. 減少 loader、plugins

每個的 loader、plugin 都有其啟動時間，盡量少地使用工具，將非必須的 loader、plugins 洗掉，

3.1 指定 include

為 loader 指定 include，減少 loader 應用范圍，僅應用于最少數量的必要模塊，，

webpack 構建性能檔案

rule.exclude 可以排除模塊范圍，也可用于減少 loader 應用范圍.

webpack.common.js 配置方式如下：

module.exports = {
  rules: [
    {
      test: /\.(js|ts|jsx|tsx)$/,
      include: paths.appSrc,
      use: [
        {
          loader: "esbuild-loader",
          options: {
            loader: "tsx",
            target: "es2015",
          },
        },
      ],
    },
  ],
};

定義 loader 的 include 后，構建時間將減少 12%，效果如下：

3.2 管理資源

使用 webpack 資源模塊 (asset module) 代替舊的 assets loader（如 file-loader/url-loader/raw-loader 等），減少 loader 配置數量，

配置方式如下：

module.exports = {
  rules: [
    {
      test: /\.(png|svg|jpg|jpeg|gif)$/i,
      include: [paths.appSrc],
      type: "asset/resource",
    },
  ],
};

引入資源模塊后，構建時間將減少 7%，效果如下：

4. 優化 resolve 配置

resolve 用來配置 webpack 如何決議模塊，可通過優化 resolve 配置來覆寫默認配置項，減少決議范圍，

4.1 alias

alias 可以創建 import 或 require 的別名，用來簡化模塊引入，

webpack.common.js 配置方式如下：

module.exports = {
  resolve: {
    alias: {
      "@": paths.appSrc, // @ 代表 src 路徑
    },
  },
};

4.2 extensions

extensions 表示需要決議的檔案型別串列，

根據專案中的檔案型別，定義 extensions，以覆寫 webpack 默認的 extensions，加快決議速度，

由于 webpack 的決議順序是從左到右，因此要將使用頻率高的檔案型別放在左側，如下我將 tsx 放在最左側，

webpack.common.js 配置方式如下：

module.exports = {
  resolve: {
    extensions: [".tsx", ".js"], // 因為我的專案只有這兩種型別的檔案，如果有其他型別，需要添加進去，
  },
};

4.3 modules

modules 表示 webpack 決議模塊時需要決議的目錄，

指定目錄可縮小 webpack 決議范圍，加快構建速度，

webpack.common.js 配置方式如下：

module.exports = {
  modules: ["node_modules", paths.appSrc],
};

4.4 symlinks

如果專案不使用 symlinks（例如 npm link 或者 yarn link），可以設定 resolve.symlinks: false，減少決議作業量，

webpack.common.js 配置方式如下：

module.exports = {
    resolve: {
        symlinks: false,
    },
}

優化 resolve 配置后，構建時間將減少 1.5%，效果如下：

5. 多行程

上述可以看到 sass-loader 的構建時間有 1.56s，占據了整個構建程序的 60%，那么有沒有方法來加快 sass-loader 的構建速度呢？

可以通過多行程來實作，試想將 sass-loader 放在一個獨立的 worker 池中運行，就不會阻礙其他 loader 的構建了，可以大大加快構建速度，

5.1 thread-loader

通過 thread-loader 將耗時的 loader 放在一個獨立的 worker 池中運行，加快 loader 構建速度，

安裝：

npm i -D thread-loader

webpack.common.js 配置方式如下：

module.exports = {
  rules: [
    {
      test: /\.module\.(scss|sass)$/,
      include: paths.appSrc,
      use: [
        "style-loader",
        {
          loader: "css-loader",
          options: {
            modules: true,
            importLoaders: 2,
          },
        },
        {
          loader: "postcss-loader",
          options: {
            postcssOptions: {
              plugins: [["postcss-preset-env"]],
            },
          },
        },
        {
          loader: "thread-loader",
          options: {
            workerParallelJobs: 2,
          },
        },
        "sass-loader",
      ].filter(Boolean),
    },
  ],
};

webpack 官網提到 node-sass 中有個來自 Node.js 執行緒池的阻塞執行緒的 bug，當使用 thread-loader 時，需要設定 workerParallelJobs: 2，

由于 thread-loader 引入后，需要 0.6s 左右的時間開啟新的 node 行程，本專案代碼量小，可見引入 thread-loader 后，構建時間反而增加了 0.19s，

因此，我們應該僅在非常耗時的 loader 前引入 thread-loader，

效果如下：

5.2 happypack ?

happypack 同樣是用來設定多執行緒，但是在 webpack5 就不要再使用 happypack 了，官方也已經不再維護了，推薦使用上文介紹的 thread-loader，

6. 區分環境

在學習 Webpack5 之路（實踐篇） - 模式（mode）章節已經介紹了 webpack 的不同模式的內置優化，

在開發程序中，切忌在開發環境使用生產環境才會用到的工具，如在開發環境下，應該排除 [fullhash]/[chunkhash]/[contenthash] 等工具，

同樣，在生產環境，也應該避免使用開發環境才會用到的工具，如 webpack-dev-server 等插件，

7. 其他

7.1 devtool

不同的 devtool 設定，會導致性能差異，

在大多數情況下，最佳選擇是 eval-cheap-module-source-map，

詳細區分可至 webpack devtool 查看，

webpack.dev.js 配置方式如下：

export.module = {
    devtool: 'eval-cheap-module-source-map',
}

7.2 輸出結果不攜帶路徑資訊

默認 webpack 會在輸出的 bundle 中生成路徑資訊，將路徑資訊洗掉可小幅提升構建速度，

module.exports = {
    output: {
        pathinfo: false,
      },
    };
}

四、減小打包體積

1. 代碼壓縮

體積優化第一步是壓縮代碼，通過 webpack 插件，將 JS、CSS 等檔案進行壓縮，

1.1 JS 壓縮

使用 TerserWebpackPlugin 來壓縮 JavaScript，

webpack5 自帶最新的 terser-webpack-plugin，無需手動安裝，

terser-webpack-plugin 默認開啟了 parallel: true 配置，并發運行的默認數量： os.cpus().length - 1 ，本文配置的 parallel 數量為 4，使用多行程并發運行壓縮以提高構建速度，

webpack.prod.js 配置方式如下：

const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
  optimization: {
    minimizer: [
      new TerserPlugin({
        parallel: 4,
        terserOptions: {
          parse: {
            ecma: 8,
          },
          compress: {
            ecma: 5,
            warnings: false,
            comparisons: false,
            inline: 2,
          },
          mangle: {
            safari10: true,
          },
          output: {
            ecma: 5,
            comments: false,
            ascii_only: true,
          },
        },
      }),
    ],
  },
};

體積減小 10%，效果如下：

1.1 ParallelUglifyPlugin ?

你可能有聽過 ParallelUglifyPlugin 插件，它可以幫助我們多行程壓縮 JS，webpack5 的 TerserWebpackPlugin 默認就開啟了多行程和快取，無需再引入 ParallelUglifyPlugin，

1.2 CSS 壓縮

使用 CssMinimizerWebpackPlugin 壓縮 CSS 檔案，

和 optimize-css-assets-webpack-plugin 相比，css-minimizer-webpack-plugin 在 source maps 和 assets 中使用查詢字串會更加準確，而且支持快取和并發模式下運行，

CssMinimizerWebpackPlugin 將在 Webpack 構建期間搜索 CSS 檔案，優化、壓縮 CSS，

安裝：

npm install -D css-minimizer-webpack-plugin

webpack.prod.js 配置方式如下：

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

module.exports = {
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        parallel: 4,
      }),
    ],
  },
};

由于 CSS 默認是放在 JS 檔案中，因此本示例是基于下章節將 CSS 代碼分離后的效果，

2. 代碼分離

代碼分離能夠把代碼分離到不同的 bundle 中，然后可以按需加載或并行加載這些檔案，代碼分離可以用于獲取更小的 bundle，以及控制資源加載優先級，可以縮短頁面加載時間，

2.1 抽離重復代碼

SplitChunksPlugin 插件開箱即用，可以將公共的依賴模塊提取到已有的入口 chunk 中，或者提取到一個新生成的 chunk，

webpack 將根據以下條件自動拆分 chunks：

新的 chunk 可以被共享，或者模塊來自于 node_modules 檔案夾；
新的 chunk 體積大于 20kb（在進行 min+gz 之前的體積）；
當按需加載 chunks 時，并行請求的最大數量小于或等于 30；
當加載初始化頁面時，并發請求的最大數量小于或等于 30；
通過 splitChunks 把 react 等公共庫抽離出來，不重復引入占用體積，

注意：切記不要為 cacheGroups 定義固定的 name，因為 cacheGroups.name 指定字串或始侄訓傳相同字串的函式時，會將所有常見模塊和 vendor 合并為一個 chunk，這會導致更大的初始下載量并減慢頁面加載速度，

webpack.prod.js 配置方式如下：

module.exports = {
  splitChunks: {
    // include all types of chunks
    chunks: "all",
    // 重復打包問題
    cacheGroups: {
      vendors: {
        // node_modules里的代碼
        test: /[\\/]node_modules[\\/]/,
        chunks: "all",
        // name: 'vendors', 一定不要定義固定的name
        priority: 10, // 優先級
        enforce: true,
      },
    },
  },
};

將公共的模塊單獨打包，不再重復引入，效果如下：

2.2 CSS 檔案分離

MiniCssExtractPlugin 插件將 CSS 提取到單獨的檔案中，為每個包含 CSS 的 JS 檔案創建一個 CSS 檔案，并且支持 CSS 和 SourceMaps 的按需加載，

安裝：

npm install -D mini-css-extract-plugin

webpack.common.js 配置方式如下：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  plugins: [new MiniCssExtractPlugin()],
  module: {
    rules: [
      {
        test: /\.module\.(scss|sass)$/,
        include: paths.appSrc,
        use: [
          "style-loader",
          isEnvProduction && MiniCssExtractPlugin.loader, // 僅生產環境
          {
            loader: "css-loader",
            options: {
              modules: true,
              importLoaders: 2,
            },
          },
          {
            loader: "postcss-loader",
            options: {
              postcssOptions: {
                plugins: [["postcss-preset-env"]],
              },
            },
          },
          {
            loader: "thread-loader",
            options: {
              workerParallelJobs: 2,
            },
          },
          "sass-loader",
        ].filter(Boolean),
      },
    ],
  },
};

注意：MiniCssExtractPlugin.loader 要放在 style-loader 后面，

效果如下：

2.3 最小化 entry chunk

通過配置 optimization.runtimeChunk = true，為運行時代碼創建一個額外的 chunk，減少 entry chunk 體積，提高性能，

webpack.prod.js 配置方式如下：

module.exports = {
    optimization: {
        runtimeChunk: true,
      },
    };
}

效果如下：

3. Tree Shaking（搖樹）

搖樹，顧名思義，就是將枯黃的落葉搖下來，只留下樹上活的葉子，枯黃的落葉代表專案中未參考的無用代碼，活的樹葉代表專案中實際用到的原始碼，

3.1 JS

JS Tree Shaking 將 JavaScript 背景關系中的未參考代碼（Dead Code）移除，通過 package.json 的 "sideEffects" 屬性作為標記，向 compiler 提供提示，表明專案中的哪些檔案是 "pure(純正 ES2015 模塊)"，由此可以安全地洗掉檔案中未使用的部分，

Dead Code 一般具有以下幾個特征：

代碼不會被執行，不可到達；
代碼執行的結果不會被用到；
代碼只會影響死變數（只寫不讀），

3.1.1 webpack5 sideEffects

通過 package.json 的 "sideEffects" 屬性，來實作這種方式，

{
  "name": "your-project",
  "sideEffects": false
}

需注意的是，當代碼有副作用時，需要將 sideEffects 改為提供一個陣列，添加有副作用代碼的檔案路徑：

{
  "name": "your-project",
  "sideEffects": ["./src/some-side-effectful-file.js"]
}

添加 TreeShaking 后，未參考的代碼，將不會被打包，效果如下：

3.1.2 對組件庫參考的優化

webpack5 sideEffects 只能清除無副作用的參考，而有副作用的參考則只能通過優化參考方式來進行 Tree Shaking，

1. lodash

類似 import { throttle } from 'lodash' 就屬于有副作用的參考，會將整個 lodash 檔案進行打包，

優化方式是使用 import { throttle } from 'lodash-es' 代替 import { throttle } from 'lodash'，lodash-es 將 Lodash 庫匯出為 ES 模塊，支持基于 ES modules 的 tree shaking，實作按需引入，

2. ant-design

ant-design 默認支持基于 ES modules 的 tree shaking，對于 js 部分，直接引入 import { Button } from 'antd' 就會有按需加載的效果，

假如專案中僅引入少部分組件，import { Button } from 'antd' 也屬于有副作用，webpack 不能把其他組件進行 tree-shaking，這時可以縮小參考范圍，將引入方式修改為 import { Button } from 'antd/lib/button' 來進一步優化，

3.2 CSS

上述對 JS 代碼做了 Tree Shaking 操作，同樣，CSS 代碼也需要搖搖樹，打包時把沒有用的 CSS 代碼搖走，可以大幅減少打包后的 CSS 檔案大小，

使用 purgecss-webpack-plugin 對 CSS Tree Shaking，

安裝：

npm i purgecss-webpack-plugin -D

因為打包時 CSS 默認放在 JS 檔案內，因此要結合 webpack 分離 CSS 檔案插件 mini-css-extract-plugin 一起使用，先將 CSS 檔案分離，再進行 CSS Tree Shaking，

webpack.prod.js 配置方式如下：

const glob = require("glob");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const PurgeCSSPlugin = require("purgecss-webpack-plugin");
const paths = require("paths");

module.exports = {
  plugins: [
    // 打包體積分析
    new BundleAnalyzerPlugin(),
    // 提取 CSS
    new MiniCssExtractPlugin({
      filename: "[name].css",
    }),
    // CSS Tree Shaking
    new PurgeCSSPlugin({
      paths: glob.sync(`${paths.appSrc}/**/*`, { nodir: true }),
    }),
  ],
};

上面為了測驗 CSS 壓縮效果，我引入了大量無效 CSS 代碼，因此 Tree Shaking 效果也非常明顯，效果如下：

3. CDN

上述是對 webpack 配置的優化，另一方面還可以通過 CDN 來減小打包體積，

這里引入 CDN 的首要目的為了減少打包體積，因此僅僅將一部分大的靜態資源手動上傳至 CDN，并修改本地引入路徑，下文的加快加載速度，將介紹另一種 CDN 優化手段，

將大的靜態資源上傳至 CDN：

字體：壓縮并上傳至 CDN；
圖片：壓縮并上傳至 CDN，

五、加快加載速度

1. 按需加載

通過 webpack 提供的 import() 語法動態匯入功能進行代碼分離，通過按需加載，大大提升網頁加載速度，

使用方式如下：

export default function App() {
  return (
    <div>
      hello react 111
      <Hello />
      <button onClick={() => import("lodash")}>加載lodash</button>
    </div>
  );
}

效果如下：

2. 瀏覽器快取

瀏覽器快取，就是進入某個網站后，加載的靜態資源被瀏覽器快取，再次進入該網站后，將直接拉取快取資源，加快加載速度，

webpack 支持根據資源內容，創建 hash id，當資源內容發生變化時，將會創建新的 hash id，

配置 JS bundle hash，webpack.common.js 配置方式如下：

module.exports = {
  // 輸出
  output: {
    // 僅在生產環境添加 hash
    filename: ctx.isEnvProduction
      ? "[name].[contenthash].bundle.js"
      : "[name].bundle.js",
  },
};

配置 CSS bundle hash，webpack.prod.js 配置方式如下：

module.exports = {
  plugins: [
    // 提取 CSS
    new MiniCssExtractPlugin({
      filename: "[hash].[name].css",
    }),
  ],
};

配置 optimization.moduleIds，讓公共包 splitChunks 的 hash 不因為新的依賴而改變，減少非必要的 hash 變動，webpack.prod.js 配置方式如下：

module.exports = {
  optimization: {
    moduleIds: "deterministic",
  },
};

通過配置 contenthash/hash，瀏覽器快取了未改動的檔案，僅重新加載有改動的檔案，大大加快加載速度，

3. CDN

將所有的靜態資源，上傳至 CDN，通過 CDN 加速來提升加載速度，

webpack.common.js 配置方式如下：

export.modules = {
output: {
    publicPath: ctx.isEnvProduction ? 'https://xxx.com' : '', // CDN 域名
  },
}

六、優化前后對比

在倉庫代碼僅 webpack 配置不同的情況下，查看優化前后對比，

優化前 github 地址
優化后 github 地址

1. 構建速度

型別	首次構建	未修改內容二次構建	修改內容二次構建
優化前	2.7s	2.7s	2.7s
優化后	2.7s	0.5s	0.3s

2. 打包體積

型別	體積大小
優化前	250 kb
優化后	231 kb

七、總結

從上章節 [優化前后對比] 可知，在小型專案中，添加過多的優化配置，作用不大，反而會因為額外的 loader、plugin 增加構建時間，

在加快構建時間方面，作用最大的是配置 cache，可大大加快二次構建速度，

在減小打包體積方面，作用最大的是壓縮代碼、分離重復代碼、Tree Shaking，可最大幅度減小打包體積，

在加快加載速度方面，按需加載、瀏覽器快取、CDN 效果都很顯著，

本篇就介紹到這兒啦，有更好的 webpack 優化方式歡迎評論區告訴我哦~

本文原始碼：

webpack Demo2 優化前
webpack Demo2 優化后

希望能對你有所幫助，感謝閱讀～

別忘了點個贊鼓勵一下我哦，筆芯 ??

參考資料

Tree-Shaking 性能優化實踐 - 原理篇
Tree-Shaking 性能優化實踐 - 實踐篇
三十分鐘掌握 Webpack 性能優化
玩轉 webpack，使你的打包速度提升 90%
帶你深度解鎖 Webpack 系列(優化篇)
Webpack 5 中的新特性
辛辛苦苦學會的 webpack dll 配置，可能已經過時了

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：

歡迎關注凹凸實驗室公眾號

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/297035.html

標籤：其他

上一篇：第 39 題：JS 資料型別有哪些？

下一篇：第 38 題：apply、call 和 bind 是什么？哪些區別？

學習 Webpack5 之路（優化篇）

一、前言

二、優化效率工具

1. 編譯進度條

2. 編譯速度分析

3. 打包體積分析

三、優化開發體驗

1. 自動更新

2. 熱更新

2.1 修改 webpack-dev-server 配置

2.2 引入 react-refresh-webpack-plugin

四、加快構建速度

1. 更新版本

1.1 webpack 版本

1.2 包管理工具版本

2. 快取

2.1 cache

2.2 dll ?

2.3 cache-loader ?

3. 減少 loader、plugins

3.1 指定 include

3.2 管理資源

4. 優化 resolve 配置

4.1 alias

4.2 extensions

4.3 modules

4.4 symlinks

5. 多行程

5.1 thread-loader

5.2 happypack ?

6. 區分環境

7. 其他

7.1 devtool

7.2 輸出結果不攜帶路徑資訊

四、減小打包體積

1. 代碼壓縮

1.1 JS 壓縮

1.1 ParallelUglifyPlugin ?

1.2 CSS 壓縮

2. 代碼分離

2.1 抽離重復代碼

2.2 CSS 檔案分離

2.3 最小化 entry chunk

3. Tree Shaking（搖樹）

3.1 JS

3.1.1 webpack5 sideEffects

3.1.2 對組件庫參考的優化

3.2 CSS

3. CDN

五、加快加載速度

1. 按需加載

2. 瀏覽器快取

3. CDN

六、優化前后對比

1. 構建速度

2. 打包體積

七、總結

參考資料