Webpack 项目构建优化详解

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