Webpack4 优化手册

Webpack 是一个现代化的前端打包工具，它可以帮助我们将多个 JavaScript 文件打包成一个或多个文件，同时还可以处理 CSS、图片等静态资源，以及前端框架等复杂依赖关系。Webpack4 是 Webpack 的最新版本，相对于之前的版本，它带来了更好的性能和更好的体验。

然而，Webpack4 的默认配置并不是最优的，很多时候我们需要对其进行优化才能达到更好的性能和体验。本文将介绍 Webpack4 的优化手册，帮助你更好地使用 Webpack4。

1. 开启生产模式

在使用 Webpack4 打包项目时，我们可以通过设置 mode 选项来指定当前的模式，可以是 development 或 production。mode 的值不同会影响到 Webpack4 的一些默认配置，例如是否开启代码压缩、是否开启 tree shaking 等。

在生产模式下，Webpack4 会自动开启代码压缩、tree shaking 等优化，因此我们应该尽可能地在生产模式下构建我们的项目：

module.exports = {
  mode: 'production',
  // ...
}

2. 使用 resolve 配置

Webpack4 中的 resolve 配置可以帮助我们更好地处理模块的引用路径，从而提高打包速度。常见的配置包括：

• extensions：指定可以省略的文件后缀名，例如 .js、.jsx、.ts、.tsx 等。
• alias：指定模块别名，可以缩短路径，例如 @ 表示项目根目录。
• modules：指定模块的搜索路径，可以减少搜索时间，例如指定只在 node_modules 中搜索。

示例代码：

// www.javascriptcn.com code example
module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
    modules: [path.resolve(__dirname, 'node_modules')],
  },
  // ...
}

3. 使用 cache 配置

Webpack4 中的 cache 配置可以帮助我们缓存编译结果，从而提高二次编译速度。在开发模式下，我们可以将 cache 配置为 true，在生产模式下可以将其配置为一个路径，例如：

// www.javascriptcn.com code example
module.exports = {
  // ...
  cache: {
    type: 'filesystem',
    // 缓存路径
    cacheDirectory: path.resolve(__dirname, '.cache'),
  },
  // ...
}

4. 使用 parallelism 配置

Webpack4 中的 parallelism 配置可以帮助我们启用多进程编译，从而提高编译速度。在配置 parallelism 时，我们应该根据当前机器的 CPU 核心数来设置合适的值，一般为 CPU 核心数的一半。

module.exports = {
  // ...
  parallelism: os.cpus().length / 2,
  // ...
}

5. 使用 splitChunks 配置

Webpack4 中的 splitChunks 配置可以帮助我们优化代码分割，将公共代码提取出来，从而减少文件大小和加载时间。常见的配置包括：

• chunks：指定需要处理的代码块，可以是 all、async、initial 等。
• minSize 和 maxSize：指定提取出来的代码块的大小范围。
• minChunks 和 maxChunks：指定代码块被引用的最小次数和最大次数。
• name：指定提取出来的代码块的名称。

示例代码：

// www.javascriptcn.com code example
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '-',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
  // ...
}

6. 使用 terser-webpack-plugin 插件

Webpack4 中的 terser-webpack-plugin 插件可以帮助我们压缩 JavaScript 代码，从而减少文件大小和加载时间。在生产模式下，我们应该将其配置为 Webpack4 的默认压缩插件。

// www.javascriptcn.com code example
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  // ...
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
  // ...
}

结语

本文介绍了 Webpack4 的优化手册，包括开启生产模式、使用 resolve 配置、使用 cache 配置、使用 parallelism 配置、使用 splitChunks 配置和使用 terser-webpack-plugin 插件等，希望可以帮助你更好地使用 Webpack4，提高前端项目的性能和体验。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d39ad4a941bf71346e28cb