1. 相關面試題 

1.1. 做過哪些Webpack打包構建優化？

• 代碼分割：使用 Webpack 的 SplitChunksPlugin 進行代碼分割，將第三方庫、公共代碼與業務代碼分離，提高緩存利用率和加載速度。

• Tree Shaking：通過配置 mode: 'production' 或使用 TerserPlugin，移除未引用的代碼，減少包體積。

• Lazy Loading：使用 import() 動態加載模塊，實現按需加載，減少初始加載時間。

• 使用 CDN：配置 externals，將常用的庫如 React、Vue 等通過 CDN 引入，減少打包體積。

• 緩存優化：通過配置 output.filename 和 output.chunkFilename 中的 [contenthash]，生成基于文件內容的哈希值，避免不必要的緩存失效。

• 開啟持久化緩存：配置 cache: { type: 'filesystem' }，提高二次構建速度。

• 優化 Loader：使用多進程和緩存，提升構建速度。還可以通過限制 babel-loader 等處理范圍來加速構建。

• 優化開發體驗：使用 webpack-dev-server 的 熱模塊替換功能，提高開發效率；或者通過配置 resolve.alias 縮短模塊查找路徑。

2. 開發構建優化詳解

2.1. 開發模式配置

2.1.1. 使用開發模式

在開發環境中，配置 mode: 'development' 可以啟用 Webpack 的內置優化，比如更快的構建速度和未壓縮的輸出代碼，這有助于開發調試。

module.exports = {mode: 'development',// 其他配置...
};

2.1.2. 配置合理的源碼鏡像

devtool 配置項控制是否生成 source map 以及生成哪種類型的 source map。eval-cheap-module-source-map 是開發模式下的推薦配置，它在構建速度和調試體驗之間取得了良好的平衡。

module.exports = {mode: 'development',devtool: 'eval-cheap-module-source-map',// 其他配置...
};

2.1.3. 啟用 HMR

HMR 允許在不刷新整個頁面的情況下替換、添加或刪除模塊。通過 webpack-dev-server 的 hot: true 配置，可以輕松啟用 HMR。

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');module.exports = {mode: 'development',devtool: 'eval-cheap-module-source-map',devServer: {contentBase: './dist',hot: true,},plugins: [new webpack.HotModuleReplacementPlugin(),],// 其他配置...
};

2.2. 模塊解析優化

2.2.1. 使用解析別名

通過為常用模塊設置路徑別名，可以減少解析路徑的時間，從而加快構建速度。

module.exports = {mode: 'development',resolve: {alias: {'@components': path.resolve(__dirname, 'src/components/'),'@utils': path.resolve(__dirname, 'src/utils/'),},},// 其他配置...
};

2.2.2. 優化模塊路徑解析

通過明確 resolve.extensions 中包含的文件擴展名，可以減少 Webpack 在解析模塊時的嘗試次數，優化構建性能。

module.exports = {mode: 'development',resolve: {extensions: ['.js', '.jsx', '.json'], // 只包含需要解析的擴展名},// 其他配置...
};

2.2.3. 明確模塊路徑

通過配置 resolve.modules 明確模塊路徑，可以避免遞歸查找，加速模塊解析。

module.exports = {mode: 'development',resolve: {modules: [path.resolve(__dirname, 'src'), 'node_modules'],},// 其他配置...
};

2.3. 緩存優化

2.3.1. 啟用文件系統緩存

Webpack 5 引入了文件系統緩存機制，通過啟用 cache: { type: 'filesystem' } 可以顯著減少二次構建時間。

module.exports = {mode: 'development',cac