Webpack 5提供了一系列工具和功能，可以在本地開發和線上構建過程中進行優化，以提高開發效率和構建性能。

1. 本地開發優化

1.1. 開啟模塊熱替換（HMR）

模塊熱替換可以在不刷新整個頁面的情況下更新模塊，提高開發效率。

const webpack = require('webpack');module.exports = {mode: 'development',devServer: {contentBase: './dist',hot: true,},plugins: [new webpack.HotModuleReplacementPlugin(),],
};

1.2. 使用 Source Maps

Source Maps 有助于在瀏覽器中調試原始源代碼，而不是轉換后的代碼。不同類型的 Source Maps 在性能和詳細程度上有所不同。

module.exports = {mode: 'development',devtool: 'eval-source-map', // 'source-map' | 'cheap-module-source-map' | 'eval-source-map' 等
};

1.3. 優化編譯速度

使用 cache 和 parallel 選項來加速構建過程。

const TerserPlugin = require('terser-webpack-plugin');module.exports = {mode: 'development',optimization: {minimize: true,minimizer: [new TerserPlugin({cache: true,parallel: true,sourceMap: true,}),],},
};

1.4. 使用持久化緩存

Webpack 5 提供了持久化緩存功能，可以顯著提高重復構建的速度。

module.exports = {cache: {type: 'filesystem', // 使用文件系統緩存},
};

1.5. 更快的增量編譯

配置 watchOptions 來優化文件監聽，減少不必要的文件掃描。

module.exports = {watchOptions: {ignored: /node_modules/,aggregateTimeout: 300, // 防抖延遲poll: 1000, // 輪詢時間},
};

2. 線上產物構建優化

2.1. 使用生產模式