从 0 到 1：webpack 优化 (2)-JavaScript中文网-JavaScript教程资源分享门户

在上一篇文章中，我们介绍了如何使用 webpack 进行基本的打包和优化。在本篇文章中，我们将深入探讨如何进一步优化 webpack 打包的性能和体验。

1. 使用多线程打包

在处理大型项目时，webpack 打包会变得非常缓慢。为了加快打包速度，我们可以使用多线程打包。webpack 4 已经默认开启了多线程打包，但是可以通过 thread-loader 或 happypack 插件来进一步优化。

使用 thread-loader

thread-loader 是一个简单的 loader，可以将其他 loader 的执行转移到 worker 池中。这样可以将一些较耗时的 loader 执行转移到单独的线程中，从而加快打包速度。在使用 thread-loader 时，需要在 webpack.config.js 中进行如下配置：

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'thread-loader', // 将其他 loader 的执行转移到 worker 池中
          'babel-loader'
        ]
      }
    ]
  }
};

使用 happypack

happypack 是一个更加强大的多线程打包插件，可以将 loader 的执行转移到多个 worker 中，从而进一步加快打包速度。在使用 happypack 时，需要在 webpack.config.js 中进行如下配置：

const HappyPack = require('happypack');
const os = require('os');

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: 'happypack/loader?id=js'
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threads: os.cpus().length, // 线程数为 CPU 核心数
      loaders: ['babel-loader']
    })
  ]
};

2. 使用 DllPlugin 和 DllReferencePlugin

在使用 webpack 打包时，每次都需要重新打包所有的模块，这样会浪费大量的时间。为了解决这个问题，我们可以使用 DllPlugin 和 DllReferencePlugin 插件。

使用 DllPlugin

DllPlugin 插件可以将第三方库（如 jQuery、React 等）单独打包成一个文件，并生成一个 manifest.json 文件，用于记录这些库的入口和导出信息。这样，在每次打包时，就可以不用重新打包这些库，而是直接引用它们的打包文件和 manifest.json 文件。

在使用 DllPlugin 时，需要在单独的 webpack 配置文件中进行如下配置：

const path = require('path');
const webpack = require('webpack');

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

使用 DllReferencePlugin

DllReferencePlugin 插件可以在打包时引用之前生成的 manifest.json 文件，并将其中的模块映射到打包后的模块中。在使用 DllReferencePlugin 时，需要在 webpack.config.js 中进行如下配置：

const path = require('path');
const webpack = require('webpack');

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

3. 使用 Tree Shaking

Tree Shaking 是指在打包时，只打包用到的代码，而不打包未用到的代码。这样可以有效减少打包后的文件大小，加快加载速度。在使用 Tree Shaking 时，需要在 webpack.config.js 中进行如下配置：

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    usedExports: true // 开启 Tree Shaking
  }
};

总结

通过多线程打包、使用 DllPlugin 和 DllReferencePlugin、使用 Tree Shaking 等优化手段，可以进一步提升 webpack 打包的性能和体验。在实际开发中，可以根据具体情况选择合适的优化手段，以达到最佳效果。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65bca067add4f0e0ff536cee