面试题：Webpack 构建性能优化的深度剖析与实践

影响 Webpack 构建性能的主要因素

模块数量：项目中模块数量越多，Webpack 在解析、构建依赖关系图时花费的时间就越长。例如大型单页应用，拥有大量的 JavaScript、CSS、图片等模块。
Loader 配置：复杂或低效的 Loader 会显著影响构建速度。比如使用 babel-loader 转译 ES6+代码，如果配置不当，可能会对整个项目进行全量转译，而不是只处理需要的部分。
插件使用：一些插件在执行过程中会遍历大量文件或进行复杂的操作。例如，html - webpack - plugin 生成 HTML 文件时，如果配置不合理，可能会生成过多冗余文件。
缓存缺失：每次构建都重新处理相同的模块，没有利用缓存，导致不必要的重复工作。

优化 Webpack 构建性能的方法及其原理

使用缓存
- 方法：在 Webpack 中，对于 Loader 可以通过 cacheDirectory 选项开启缓存。例如 babel-loader 配置 cacheDirectory: true。对于 Webpack 的整体构建缓存，可以使用 webpack - - cache 或者 cache - loader 插件。
- 原理：开启 Loader 缓存后，Loader 在处理模块时会将处理结果缓存到指定目录，下次构建遇到相同模块时直接读取缓存，无需重新处理。Webpack 整体缓存则是将构建过程中的中间结果缓存起来，在后续构建中如果相关文件未改变，就直接使用缓存结果，减少构建时间。例如在一个 React 项目中，每次构建时 babel-loader 对 React 组件文件进行转译，开启缓存后，只要组件文件未修改，就直接读取缓存，构建速度大幅提升。
优化 Loader 配置
- 方法：精确配置 Loader 的作用范围，使用 include 和 exclude 选项。例如，babel-loader 只对 src 目录下的文件进行转译，配置为 { test: /\.js$/, exclude: /node_modules/, use: { loader: 'babel-loader', options: { presets: ['@babel/preset - env'] } } }。
- 原理：通过 include 和 exclude 选项，Loader 只处理指定范围内的文件，避免对整个项目文件无差别处理，减少不必要的计算，从而提高构建性能。在一个包含大量第三方库的项目中，第三方库通常不需要进行 babel 转译，通过 exclude: /node_modules/ 配置，babel-loader 就不会处理 node_modules 中的文件，加快了构建速度。
代码分割
- 方法：使用 Webpack 的 splitChunks 插件进行代码分割。例如，将第三方库和业务代码分开打包，配置如下：

optimization: {
    splitChunks: {
        chunks: 'all',
        cacheGroups: {
            vendor: {
                test: /[\\/]node_modules[\\/]/,
                name:'vendors',
                chunks: 'all'
            }
        }
    }
}

- **原理**：代码分割将项目代码按照一定规则拆分成多个 chunk，浏览器可以并行加载这些 chunk，提高加载性能。同时，对于第三方库等稳定的代码进行单独打包，在后续构建中只要第三方库未改变，对应的 chunk 就无需重新构建，也提高了构建性能。在一个使用了 Vue 和多个 UI 库的项目中，将 Vue 及其相关 UI 库代码提取到一个 vendor chunk 中，业务代码单独打包，构建时如果业务代码修改，只需要重新构建业务代码的 chunk，而 vendor chunk 可复用之前的构建结果，加快了构建速度。

星途面试题库

面试题：Webpack 构建性能优化的深度剖析与实践

知识考点

面试题答案

影响 Webpack 构建性能的主要因素

优化 Webpack 构建性能的方法及其原理