玩转 webpack 之性能篇（调优编译时间）-JavaScript中文网-JavaScript教程资源分享门户

玩转 webpack 之性能篇（调优编译时间）

webpack 是前端开发中最常用的打包工具之一，它能够将多个 JavaScript 文件、CSS 文件、图片等资源打包成一个或多个文件，实现对前端代码的优化和压缩，提高页面加载速度。然而，在实际开发中，webpack 编译时间的长短成为了很多开发者关注的焦点。本文将介绍如何通过调节 webpack 配置来优化编译时间。

避免不必要的编译

在实际开发中，有很多情况下并不需要对所有的代码进行编译。比如，我们可以通过配置 exclude 和 include 属性来避免对某些文件或目录进行编译。

// javascriptcn.com 代码示例
module.exports = {
  //...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: 'babel-loader'
      }
    ]
  }
}

上面的配置将排除 node_modules 目录下的所有 JavaScript 文件，只对 src 目录下的 JavaScript 文件进行编译。这样可以避免不必要的编译，提高编译效率。

使用 HappyPack 多线程编译

webpack 默认是单线程编译，这意味着在编译大型项目时，编译时间会非常长。为了提高编译效率，我们可以使用 HappyPack 插件，将编译任务分配到多个子进程中执行，从而实现多线程编译。

// javascriptcn.com 代码示例
const HappyPack = require('happypack');
const os = require('os');

module.exports = {
  //...
  plugins: [
    new HappyPack({
      id: 'js',
      loaders: ['babel-loader'],
      threads: os.cpus().length - 1
    })
  ],
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        include: path.resolve(__dirname, 'src'),
        use: 'happypack/loader?id=js'
      }
    ]
  }
}

上面的配置中，我们使用了 HappyPack 插件，并将编译任务分配到了多个子进程中执行。这样可以大幅度缩短编译时间，提高开发效率。

使用 DllPlugin 和 DllReferencePlugin 预编译

DllPlugin 和 DllReferencePlugin 是 webpack 提供的两个插件，它们可以将一些不常更新的第三方库（如 jQuery、React 等）预编译成一个单独的文件，从而避免每次编译时都重新打包这些库，提高编译效率。

首先，我们需要创建一个单独的 webpack 配置文件，用于预编译第三方库：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendors: ['jquery', 'react', 'react-dom']
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'dll/[name].manifest.json'),
      name: '[name]',
      context: __dirname
    })
  ]
};

上面的配置中，我们通过 entry 属性指定了需要预编译的第三方库，然后通过 DllPlugin 插件将其打包成一个单独的文件，并生成一个 manifest 文件，用于在后续的编译中引用。

然后，在主 webpack 配置文件中，我们可以使用 DllReferencePlugin 插件引用预编译的第三方库：

// javascriptcn.com 代码示例
const path = require('path');
const webpack = require('webpack');

module.exports = {
  //...
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./dll/vendors.manifest.json')
    })
  ]
};

上面的配置中，我们使用了 DllReferencePlugin 插件，并通过 manifest 属性引用了预编译的第三方库。这样可以避免每次编译时都重新打包这些库，提高编译效率。

总结

通过以上三种方式，我们可以优化 webpack 的编译时间，提高开发效率。当然，还有很多其他的优化方式，如使用缓存、压缩代码等，读者可以根据实际情况选择合适的优化方式。

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