webpack 打包性能优化策略汇总-JavaScript中文网-JavaScript教程资源分享门户

随着前端项目的日益复杂，webpack 打包已经成为了前端开发中必不可少的一部分。但是随着项目规模的增大，webpack 打包时间也会变得越来越长，影响开发效率。在本文中，我们将介绍一些 webpack 打包性能优化的策略，帮助你提高 webpack 打包速度，提高开发效率。

1. 使用缓存

使用缓存是提高 webpack 打包速度的最简单方法。webpack 会将每个模块的编译结果缓存起来，以便下次使用时直接读取，避免重复编译。你可以在 webpack 配置文件中开启缓存，如下所示：

module.exports = {
  // ...
  cache: true,
  // ...
};

2. 使用多线程编译

默认情况下，webpack 只会使用单个线程进行编译，这会导致编译时间很长。你可以使用多线程编译来提高编译速度。可以使用 webpack-parallel-uglify-plugin 插件来实现多线程压缩 JavaScript 代码，使用 thread-loader 插件来实现多线程编译 JavaScript 和 CSS 代码。使用方法如下：

// www.javascriptcn.com code example
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin');
const threadLoader = require('thread-loader');

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'thread-loader',
            options: {
              workers: require('os').cpus().length - 1,
            },
          },
          'babel-loader',
        ],
      },
      {
        test: /\.css$/,
        use: [
          'thread-loader',
          'style-loader',
          'css-loader',
        ],
      },
    ],
  },
  plugins: [
    new ParallelUglifyPlugin({
      // ...
    }),
  ],
  // ...
};

3. 分离第三方库

将第三方库单独打包成一个文件，可以避免每次修改业务代码时都需要重新打包第三方库，从而提高打包速度。可以使用 webpack 的 splitChunks 配置项来实现，如下所示：

// www.javascriptcn.com code example
module.exports = {
  // ...
  optimization: {
    splitChunks: {
      cacheGroups: {
        vendors: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
  // ...
};

4. 按需加载

按需加载可以避免一次性加载所有代码，从而提高页面加载速度。可以使用 webpack 的动态 import 语法来实现按需加载，如下所示：

import('./module').then(module => {
  // ...
});

5. 压缩代码

压缩代码可以减小代码体积，从而提高页面加载速度。可以使用 webpack 自带的 uglifyjs-webpack-plugin 插件来实现代码压缩，如下所示：

// www.javascriptcn.com code example
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJsPlugin({
        // ...
      }),
    ],
  },
  // ...
};

6. 减少文件搜索范围

减少文件搜索范围可以减小 webpack 的工作量，从而提高打包速度。可以使用 resolve 配置项来指定模块搜索路径，如下所示：

// www.javascriptcn.com code example
module.exports = {
  // ...
  resolve: {
    modules: [
      path.resolve(__dirname, 'src'),
      'node_modules',
    ],
  },
  // ...
};

7. 使用 tree shaking

tree shaking 可以去除无用代码，从而减小代码体积，提高页面加载速度。可以使用 webpack 的 optimization.minimize 配置项开启 tree shaking，如下所示：

module.exports = {
  // ...
  optimization: {
    minimize: true,
  },
  // ...
};

8. 使用 DllPlugin

DllPlugin 可以将第三方库打包成一个单独的文件，避免每次编译时都需要编译第三方库，从而提高编译速度。使用 DllPlugin 需要分为两步：

首先使用 DllPlugin 编译第三方库，生成一个 manifest 文件：

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

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

在 webpack 配置文件中使用 DllReferencePlugin 引入 manifest 文件：

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

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      manifest: require(path.resolve(__dirname, 'dist/vendors.manifest.json')),
    }),
  ],
  // ...
};

结语

以上是一些 webpack 打包性能优化的策略，希望能够帮助你提高 webpack 打包速度，提高开发效率。

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

webpack 打包性能优化策略汇总