Webpack 优化配置实战

Webpack 是一款强大的打包工具，但是在项目变得越来越大的时候，Webpack 打包的速度也会变得越来越慢。为了提高 Webpack 的打包速度，我们需要进行一些优化配置。本文将介绍几种 Webpack 优化配置的实战经验。

1. 使用 HappyPack

HappyPack 是一个多线程加速工具，可以将 Webpack 的模块解析和文件压缩等操作分配到多个子进程中进行处理，从而提高打包速度。使用 HappyPack 需要安装 happypack 和 happypack-loader。

以下是使用 HappyPack 的示例代码：

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

const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

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

2. 使用缓存

Webpack 打包的过程中会生成大量的中间文件，这些文件可以被缓存起来，以便下次打包时可以直接使用缓存中的文件，避免重复打包。使用缓存需要安装 cache-loader。

以下是使用缓存的示例代码：

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

3. 使用 DllPlugin

DllPlugin 可以将一些不会频繁更新的模块提前打包成一个单独的文件，并在开发过程中直接引用这个文件，从而提高打包速度。使用 DllPlugin 需要安装 webpack 和 webpack-cli。

以下是使用 DllPlugin 的示例代码：

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

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

// webpack.config.js
const path = require('path');
const webpack = require('webpack');

module.exports = {
  mode: 'development',
  entry: {
    main: './src/index.js',
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
  },
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendor.manifest.json'),
    }),
  ],
};

4. 使用 Tree Shaking

Tree Shaking 可以通过静态分析的方式，去除无用代码，从而减小打包文件的体积。使用 Tree Shaking 需要安装 uglifyjs-webpack-plugin 和 webpack-deep-scope-plugin。

以下是使用 Tree Shaking 的示例代码：

// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const { WebpackDeepScopeAnalysisPlugin } = require('webpack-deep-scope-plugin').default;

module.exports = {
  mode: 'production',
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        uglifyOptions: {
          compress: {
            warnings: false,
            drop_console: true,
          },
          output: {
            comments: false,
          },
        },
      }),
    ],
  },
  plugins: [
    new WebpackDeepScopeAnalysisPlugin(),
  ],
};

以上是几种 Webpack 优化配置的实战经验，希望能对大家有所帮助。

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