如何使用 webpack 进行性能优化？-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是现代 Web 开发中最常用的工具，它的核心功能是将多个资源打包成一个或多个 bundle，同时提供了许多插件和工具来优化打包过程和生成的代码。在实际项目中，使用 Webpack 可以极大地提高开发效率，但是在打包的过程中，也可能会遇到一些性能瓶颈。因此，本篇文章将介绍一些如何使用 Webpack 进行性能优化的技巧，帮助开发者加快项目的打包速度和提升用户的使用体验。

一、优化 Webpack 打包速度

第一个需要考虑的问题是打包速度。在某些情况下，Webpack 打包所需的时间会非常长，导致开发者无法快速部署新的版本。以下是一些可以优化 Webpack 打包速度的常见技巧：

1. 使用多线程或多进程

Webpack 默认情况下是单线程打包，将启用 worker_threads 用于 multi-process。此功能在 Webpack v5 和以下版本上，需要先在 nodejs 配置 worker_threads，例如：

const Worker = require("worker_threads").Worker;

Webpack v5 已经内置了多线程打包，可以通过以下方式启用：

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  // ...
  infrastructureLogging: {
    level: 'verbose',
  },
  // ...
  experiments: {
    topLevelAwait: true, // 开启首屏加载时间优化
    asyncWebAssembly: true, // 允许 JavaScript 直接内联 WebAssembly
    parallelism: 8, // 8 是一个不错的数字，它默认是 cpu 的核数
  }
  // ...
}

2. 添加 Cache

Webpack 核心模块提供了一些高速缓存的机制，用于提供多种不同风格的缓存。缓存过程中安装一些常用的缓存插件，减少重新编译的时间。此外，Webpack 抽象了一个内部的 compiler 实例，它提供了一些方法，可以使用它将多个入口文件历史缓存到磁盘上，以便在下次 webpack 打包时使用。一个常用的工具是 webpack-cache-fetcher，使用起来非常简单。

Webpack v4 以前

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  cache: true,
  // ...
  optimization: {
    // ...
    moduleIds: 'hashed',
    // ...
  }
  // ...
}

Webpack v4 以后

// www.javascriptcn.com code example
// webpack.config.js
module.exports = {
  cache: {
    type: 'filesystem',
    // 使用绝对路径来让缓存生效
    cacheDirectory: resolve('.temp_cache'),
  }
  // ...
}

3. 移除无用的部分

Webpack 打包时，如果存在一些不必要的部分，可以将其移除以提高打包速度。例如，可在 Webpack 配置中使用 IgnorePlugin 或其他相关插件来删除不必要的模块或插件。还可以使用 Tree Shaking或其他相关插件只保留使用的代码。优化后将减少不必要的代码，使打包时间更快且文件更小。

webpack.config.js

// www.javascriptcn.com code example
const CompressionWebpackPlugin = require('compression-webpack-plugin');

modules.export = {
  ...
  plugins: [
    new CompressionWebpackPlugin({
      algorithm: 'gzip', // 解压方式 gzip
      test: /\.js$|\.css$|\.html$/, // 压缩文件类型
      threshold: 10240, // 收缩大小超过10kb的文件
      deleteOriginalAssets: false // 压缩后保留原始文件
    })
  ]
}

4. 使用 externals 外部文件

当打包巨大的第三方库时，我们可以使用 externals，将库从 Webpack 中排除，这样可以减少打包的体积很多。例如，引入 jQuery 或者 Highcharts 等，只要在代码中用到了模块，就可以使用这个方式加速打包：

webpack.config.js

module.exports = {
  ...
  externals: {
    jquery: 'jQuery'
  }
}

二、优化 Webpack 生成的代码

当 Webpack 打包出来的代码太大或执行速度太慢时，我们可以使用一些技巧来优化代码的生成过程。以下是一些常见的优化 Webpack 生成的代码：

1. 使用代码分割技术

Webpack 可以分割代码，生成不同的文件。代码分割技术主要分为两种：一种是按需代码分割，另一种是手动分割。按需分割会给你更多控制权，而手动分割则需要更多的手动工作。如果你选择的是按需分割，Webpack 会将可分享的代码分离出来，这些代码可以在多个页面上重复使用，提高效率。

// www.javascriptcn.com code example
// webpack.config.js
rules: [
  // CSS 的打包编译
  {
    test: /\.css$/,
    use: ['style-loader', 'css-loader'],
    sideEffects: true
  },
  // Fonts 的打包编译
  {
    test: /\.(woff|woff2|eot|ttf|otf)$/,
    use: ['file-loader']
  },
  // JS 的打包编译
  {
    test: /\.js$/,
    loader: 'babel-loader',
    exclude: /node_modules/
  }
]

2. 压缩和优化 Webpack 的生成代码

除了打包的代码，Webpack 还会生成一些运行时代码。你可以使用高级技术来优化和减小这些代码，包括压缩和混淆代码、删除不必要的代码、使用功能模块来提高性能等等。

特别是在使用 jQuery 和 Bootstrap 等包含许多特效和重复的样式文件时，优化代码能够显著提高构建效率。像 Terser, UglifyJS 和 Webpack Hammer 这样的插件可以用来混淆代码和移除不必要的代码。

处理后使用 webpack-bundle-analyzer 可查看代码的大小变化。

使用方式为：webpack --profile --json > stats.json

// www.javascriptcn.com code example
// webpack.config.js
plugins: [
  new webpack.optimize.AggressiveMergingPlugin(),
  new UglifyJSPlugin(),
  new webpack.optimize.OccurrenceOrderPlugin(),
  new WebpackDeepScopeAnalysisPlugin(),
  new webpack.NoEmitOnErrorsPlugin(),
  new webpack.optimize.ModuleConcatenationPlugin(),
  new webpack.LoaderOptionsPlugin({
    options: {
      postcss: [
        require('autoprefixer')(),
        require('postcss-pxtorem')({
          rootValue: 100,
          propList: ['*'],
          selectorBlackList: [], // 过滤掉默认不转换的 class，保留可以设置 rem 的 class
          minPixelValue: 2 // 值小于指定的 unit 不转换
        })
      ]
    }
  })
]

结束语

本文介绍了如何使用 Webpack 进行性能优化的技巧，从优化 Webpack 打包速度到优化 Webpack 生成的代码。在实际项目中，随着 Web 程序的发展和扩展，应用规模日渐庞大，因此需要不断优化系统的性能，才能满足更高的性能要求，提高用户的使用体验。我们应该不断学习和探索，寻找最佳的优化策略，提高 Web 应用的性能和效率。

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

如何使用 webpack 进行性能优化？