前端工程化之 webpack 如何优化构建性能-JavaScript中文网-JavaScript教程资源分享门户

随着前端技术的不断发展，前端项目越来越复杂，构建过程也越来越耗时。为了提高前端项目构建的效率，我们需要对 webpack 进行优化，从而提高构建性能。

1. 优化 webpack 的配置

1.1 使用 webpack 的 production 模式

在 webpack 的配置文件中，我们可以设置 mode 属性为 production，这样 webpack 将会自动启用一些优化策略，如代码压缩，作用域提升等，从而提高构建性能。

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

1.2 减少文件搜索范围

webpack 在构建过程中需要搜索所有的模块文件，这个过程会耗费大量的时间。我们可以通过设置 resolve.modules 和 resolve.extensions 属性来减少文件搜索范围，从而提高构建性能。

module.exports = {
  resolve: {
    modules: [path.resolve(__dirname, 'src'), 'node_modules'],
    extensions: ['.js', '.jsx', '.json'],
  },
  // ...
}

1.3 使用 DllPlugin 预编译资源

DllPlugin 是 webpack 自带的一个插件，它可以将一些不经常变化的模块打包成一个单独的文件，从而提高构建性能。我们可以使用 DllPlugin 预编译一些常用的第三方库，例如 React、Vue 等。

// www.javascriptcn.com code example
// webpack.config.dll.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'production',
  entry: {
    react: ['react', 'react-dom'],
    vue: ['vue', 'vue-router'],
  },
  output: {
    filename: '[name].dll.js',
    path: path.resolve(__dirname, 'public/dll'),
    library: '[name]_dll',
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]_dll',
      path: path.resolve(__dirname, 'public/dll/[name].manifest.json'),
    }),
  ],
};

// webpack.config.js
module.exports = {
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./public/dll/react.manifest.json'),
    }),
    new webpack.DllReferencePlugin({
      manifest: require('./public/dll/vue.manifest.json'),
    }),
    // ...
  ],
  // ...
};

2. 优化 loader 和 plugin 的使用

2.1 使用 babel-loader 的缓存

babel-loader 是一个非常常用的 loader，它可以将 ES6+ 的代码转换成 ES5 代码。但是，由于 babel-loader 的转换过程比较耗时，我们可以使用 babel-loader 的缓存功能，从而提高构建性能。

// www.javascriptcn.com code example
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              cacheDirectory: true,
            },
          },
        ],
        exclude: /node_modules/,
      },
      // ...
    ],
  },
  // ...
};

2.2 使用 HappyPack 加速 loader 执行

HappyPack 是一个可以将 loader 的执行过程并行化的插件，从而提高构建性能。我们可以使用 HappyPack 加速一些耗时的 loader，例如 babel-loader、sass-loader 等。

// www.javascriptcn.com code example
const HappyPack = require('happypack');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['happypack/loader?id=babel'],
        exclude: /node_modules/,
      },
      // ...
    ],
  },
  plugins: [
    new HappyPack({
      id: 'babel',
      loaders: ['babel-loader'],
    }),
    // ...
  ],
  // ...
};

2.3 使用 PurgeCSSPlugin 剔除无用的 CSS

在开发过程中，我们通常会引入一些第三方库或者样式库，这些库中可能包含一些我们没有使用过的 CSS 代码，这些代码会增加 CSS 文件的体积，从而降低构建性能。我们可以使用 PurgeCSSPlugin 剔除无用的 CSS，从而提高构建性能。

// www.javascriptcn.com code example
const glob = require('glob');
const PurgeCSSPlugin = require('purgecss-webpack-plugin');

module.exports = {
  plugins: [
    new PurgeCSSPlugin({
      paths: glob.sync(`${path.join(__dirname, 'src')}/**/*`, { nodir: true }),
    }),
    // ...
  ],
  // ...
};

3. 优化 webpack 的打包结果

3.1 使用 Tree Shaking 剔除无用的代码

Tree Shaking 是一个可以剔除无用代码的技术，它可以将引入的模块中没有使用的代码剔除掉，从而减少打包文件的体积。我们可以使用 webpack 的 UglifyJsPlugin 和 OptimizeCSSAssetsPlugin 来启用 Tree Shaking。

// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        cache: true,
        parallel: true,
        sourceMap: true,
      }),
      new OptimizeCSSAssetsPlugin({}),
    ],
  },
  // ...
};

3.2 启用 Gzip 压缩

Gzip 压缩是一种可以减小文件体积的压缩方式，它可以将文件体积减小 70% 左右。我们可以在服务器端启用 Gzip 压缩，从而提高页面的加载速度。

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

module.exports = {
  plugins: [
    new CompressionPlugin({
      test: /\.js$|\.html$|\.css$/,
      threshold: 10240,
      minRatio: 0.8,
    }),
    // ...
  ],
  // ...
};

结语

通过以上的优化方式，我们可以大大提高 webpack 的构建性能，从而提高项目的开发效率。当然，优化的方式还有很多，需要根据具体的项目情况进行选择。希望这篇文章能够对大家有所帮助。

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

前端工程化之 webpack 如何优化构建性能