掌握 Webpack 打包性能优化-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中常用的打包工具，它可以将多个模块打包成一个或多个文件，使得前端项目的开发、部署和维护变得更加简单和高效。但是，随着项目复杂度的增加，Webpack 打包时间也会逐渐变长，这就需要我们对打包流程进行优化，提升项目的性能和开发效率。

本文将介绍 Webpack 打包性能优化的相关技巧和实践经验，包括以下内容：

使用 DLLPlugin 和 DllReferencePlugin 加速打包
使用 HappyPack 并行处理模块
使用 Tree Shaking 剔除无用代码
使用 Code Splitting 拆分代码

1. 使用 DLLPlugin 和 DllReferencePlugin 加速打包

DLLPlugin 和 DllReferencePlugin 是 Webpack 中常用的插件，它们可以将一些较大的库或框架打包成一个单独的文件，避免每次打包都需要重新编译这些文件，从而加快打包速度。

下面是一个使用 DLLPlugin 和 DllReferencePlugin 的示例代码：

// www.javascriptcn.com code example
// webpack.config.js

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

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

// www.javascriptcn.com code example
// webpack.prod.config.js

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

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

这里我们将 React 和 React-DOM 库打包成 vendor.dll.js 文件，并使用 DllPlugin 插件生成 vendor-manifest.json 文件。然后在 webpack.prod.config.js 中使用 DllReferencePlugin 插件引用这个文件，从而避免每次打包都需要重新编译 React 和 React-DOM 库。

2. 使用 HappyPack 并行处理模块

Webpack 在打包过程中会逐个处理每个模块，这个过程是串行的，即每个模块必须等待前面的模块处理完成才能开始处理。这就导致了打包速度较慢的问题。为了解决这个问题，我们可以使用 HappyPack 插件，它可以将模块的处理过程并行化，从而提升打包速度。

下面是一个使用 HappyPack 插件的示例代码：

// www.javascriptcn.com code example
// webpack.config.js

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']
    })
  ]
};

这里我们使用 HappyPack 插件将 babel-loader 并行化处理 JavaScript 模块。

3. 使用 Tree Shaking 剔除无用代码

Tree Shaking 是 Webpack 2.x 中新增的一个功能，它可以剔除 JavaScript 模块中未被使用的代码，从而减小打包文件的体积，提升页面加载速度。

下面是一个使用 Tree Shaking 的示例代码：

// webpack.config.js

module.exports = {
  // ...
  optimization: {
    usedExports: true
  }
};

这里我们在 webpack.config.js 中开启了 usedExports 配置项，启用 Tree Shaking 功能。

4. 使用 Code Splitting 拆分代码

Code Splitting 是 Webpack 中常用的优化手段，它可以将一个大的 JavaScript 文件拆分成多个小的文件，从而实现按需加载，减小页面加载时间。

下面是一个使用 Code Splitting 的示例代码：

// www.javascriptcn.com code example
// webpack.config.js

module.exports = {
  entry: {
    app: './src/index.js',
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].[chunkhash].js'
  },
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'all'
        }
      }
    }
  }
};

这里我们使用 splitChunks 配置项将 React 和 React-DOM 库拆分成 vendor.[chunkhash].js 文件，从而实现按需加载。

综上所述，掌握 Webpack 打包性能优化是前端开发中必备的技能之一。通过使用 DLLPlugin 和 DllReferencePlugin 加速打包、使用 HappyPack 并行处理模块、使用 Tree Shaking 剔除无用代码和使用 Code Splitting 拆分代码等手段，我们可以提升项目的性能和开发效率。

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

掌握 Webpack 打包性能优化

1. 使用 DLLPlugin 和 DllReferencePlugin 加速打包

2. 使用 HappyPack 并行处理模块

3. 使用 Tree Shaking 剔除无用代码

4. 使用 Code Splitting 拆分代码

接着读