剖析 Webpack 打包性能优化方案，你需要知道的一切-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是前端开发中不可或缺的打包工具，但在项目过大或打包过程中，性能问题已经成为 Webpack 使用者非常关注的话题。本文将探讨 Webpack 打包性能的瓶颈，以及如何针对性地优化性能。

Webpack 打包性能瓶颈

在进行 Webpack 打包性能优化之前，我们需要了解 Webpack 打包性能的瓶颈在哪里。通常情况下，Webpack 打包性能主要受如下因素影响：

1. 模块分析

模块分析指的是 Webpack 递归分析模块依赖的过程。这个过程中，Webpack 需要不断地读取文件内容，寻找相应的依赖，如果依赖层级过深或依赖的模块数量庞大，就会大大降低 Webpack 打包的性能。

2. 插件/工具的使用

Webpack 提供了丰富的插件/工具来优化打包性能，但有些插件/工具也可能导致打包性能下降。比如，使用 CSS 预处理器和 PostCSS 需要处理大量的文件和代码，这些操作都会显著增加 Webpack 的打包时间。

3. 模块的大小和数量

Webpack 打包的性能还与所处理的模块大小和数量有关，打包大文件或大量文件时，Webpack 需要花费更多的时间来处理这些数据。

Webpack 打包性能优化方案

了解 Webpack 打包性能的瓶颈之后，我们就能够采用相应的优化策略以提高 Webpack 打包性能。以下是一些建议：

1. 减少模块分析时间

使用缓存

Webpack 从文件系统中读取每个文件并对其解析，为了减少这些开销，可以使用缓存。Webpack 3 和 4 默认开启缓存，请确保在每次打包之前清除缓存。可以使用 hard-source-webpack-plugin 等插件来实现此功能。

减少模块依赖层级

模块依赖层级越多，Webpack 分析模块所需的时间就越长。通常情况下，保持模块依赖关系的简单性是最优选择。

提升 parsing 性能

Webpack 解析每个模块的开销很大，我们可以使用 fastparse 等插件来提高解析速度。此外，也可以通过配置优化 loader 来帮助提高 parsing 性能。

2. 减少插件/工具的使用量

移除无用的插件/工具

请尽量减少无用的插件/工具的使用。在选择插件/工具时，请优先考虑可靠性和性能。

使用 Loader Options 插件

一些插件和 loader 具有用于优化 Webpack 速度和性能的选项。Loader Options 插件允许把这些选项集中放在一个地方，避免复杂配置的重复出现。

3. 减小模块的大小和数量

分离第三方库

可以通过把第三方库分离出来形成单独的 chunk 来减小模块的大小。使用 CommonsChunkPlugin 或者 Webpack 4 中的 splitChunks。

移除冗余代码

可以使用 UglifyJSPlugin 去掉页面中未使用的代码。通过剔除此类无用代码来缩小每个模块的大小。

懒加载

懒加载可以在用户需要时再加载模块，从而减少不必要的网络请求。通常可以使用 import() 和 require.ensure() 来实现懒加载。

示例代码

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

const webpack = require('webpack');
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HardSouceWebpackPlugin = require('hard-source-webpack-plugin');

module.exports = {
  entry: {
    main: resolve(__dirname, './src/index.js'),
  },
  output: {
    filename: '[name].js',
    path: resolve(__dirname, './dist')
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
      },
      {
        test: /\.js$/,
        use: ['eslint-loader'],
        enforce: 'pre',
        include: resolve(__dirname, './src'),
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: resolve(__dirname, './src/index.html'),
    }),
    new HardSouceWebpackPlugin(),
    new webpack.LoaderOptionsPlugin({
      minimize: true,
      debug: false,
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: { warnings: false },
      sourceMap: false,
    }),
  ],
};

以上是一个基础的 Webpack 配置文件，你可以针对以上优化点进行更多的配置。最后，建议在进行 Webpack 打包性能优化之前，请确保已经对项目进行基本的优化（如使用 CDN、压缩图片等）以提高 Webpack 以外的性能。

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

剖析 Webpack 打包性能优化方案，你需要知道的一切