React 项目优化之 Webpack 加速打包-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，Webpack 是一个非常常见的工具，用于打包、编译、压缩和优化代码。在 React 项目中，Webpack 扮演着至关重要的角色，但是在打包过程中，Webpack 的速度可能会受到影响，导致开发效率降低。本文将介绍一些优化 Webpack 打包速度的方法。

1. 使用缓存

Webpack 有两种类型的缓存：loader 缓存和插件缓存。使用缓存可以减少打包时间，因为缓存会记录已经处理过的文件，避免重复处理。

1.1 Loader 缓存

在 Webpack 中，如果你使用了一些复杂的 loader，如 babel-loader，可以使用 cacheDirectory 选项开启 loader 缓存。

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

1.2 插件缓存

Webpack 的插件也可以使用缓存，可以通过 cache 属性开启插件缓存。

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

module.exports = {
  // ...
  plugins: [
    new webpack.optimize.UglifyJsPlugin({
      cache: true,
      parallel: true,
      sourceMap: true,
    }),
  ],
  // ...
}

2. 减少解析

Webpack 在打包过程中需要解析所有的模块和依赖关系，这是一个非常耗时的过程。减少解析可以加速打包。

2.1 使用 resolve.alias

使用 resolve.alias 可以将模块的引用路径映射为一个新的路径，这样可以避免 Webpack 解析模块的时候遍历整个目录结构。

// www.javascriptcn.com code example
module.exports = {
  // ...
  resolve: {
    alias: {
      'react': path.resolve(__dirname, './node_modules/react'),
      'react-dom': path.resolve(__dirname, './node_modules/react-dom'),
    },
  },
  // ...
}

2.2 使用 resolve.extensions

在 Webpack 解析模块的时候，如果没有指定文件后缀名，Webpack 会尝试使用 resolve.extensions 中指定的后缀名进行解析，如果找到了对应的文件，则直接使用该文件，不再尝试其他后缀名。

module.exports = {
  // ...
  resolve: {
    extensions: ['.js', '.jsx'],
  },
  // ...
}

3. 多进程打包

Webpack 4 支持多进程打包，可以通过 thread-loader 或者 HappyPack 来实现。

3.1 thread-loader

thread-loader 可以将一些耗时的 loader 放到 worker 池中，通过多进程打包来提高打包速度。

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

3.2 HappyPack

HappyPack 可以将 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'],
    }),
  ],
  // ...
}

4. 使用 DllPlugin

DllPlugin 可以将一些稳定的第三方库单独打包成一个 dll 文件，可以避免每次打包都重新打包这些库，从而加速打包。

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

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require('./vendor-manifest.json'),
    }),
  ],
  // ...
}

结语

通过使用缓存、减少解析、多进程打包和使用 DllPlugin，可以大大提高 Webpack 打包速度，从而提高开发效率。但是需要注意的是，这些优化方法并不是万能的，具体使用需要根据项目实际情况进行调整。

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

React 项目优化之 Webpack 加速打包