webpack 性能调优-JavaScript中文网-JavaScript教程资源分享门户

前言

在现代的 Web 开发中，前端构建工具已经成为必不可少的一部分。webpack 作为最为流行的前端构建工具之一，其强大的功能和灵活的配置方式受到了广泛的关注和使用。而对于一个庞大的项目，webpack 的性能调优尤为重要。在本文中，我们将详细介绍 webpack 的性能优化方法，以及如何通过合理的配置来优化构建速度。

优化原则

在进行 webpack 性能调优时，需要遵循以下几个原则：

减少不必要的处理：尽量减少 webpack 的处理时间，避免不必要的额外处理。
尽可能利用缓存：webpack 可以缓存部分中间处理结果，从而避免重复处理。
尽量减少文件体积：文件体积较大的文件会导致构建时间变长，因此尽可能地减少文件体积。
合理使用代码分割技术：代码分割可以将代码拆分成更小的模块，从而减少构建时间。

优化方法

配置 devtool

在开发中，开启 sourceMap 调试功能可以帮助我们更好地找出代码问题，但是 sourceMap 文件也会影响构建性能。为了避免影响性能，我们可以在 webpack 的配置文件中设置合适的 devtool（调试工具）来控制 sourceMap 的生成。

module.exports = {
  devtool: 'cheap-module-source-map'
}

在 production 环境下，建议使用 hidden-source-map 或 none，避免暴露源代码。

配置 resolve

在 webpack 的配置文件中，通过配置 resolve 属性可以指定 webpack 查找模块时的策略。对于常用的模块，可以直接指定路径，避免多余的查找。

// javascriptcn.com 代码示例
module.exports = {
  resolve: {
    modules: ['node_modules'], // 只在 node_modules 中查找模块
    extensions: ['.js', '.jsx'], // 只查找指定后缀的文件
    alias: {
      '@': path.resolve(__dirname, 'src') // 将 @ 映射到 src 目录
    }
  }
}

配置 loader

在使用 loader 时，应尽可能地减少 loader 的数量。每个 loader 都会增加处理时间，因此需要慎重选择和使用每个loader。同时，也要注意排除不必要的文件和目录，以减少处理的文件数量。

// javascriptcn.com 代码示例
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: ['babel-loader'],
        exclude: /node_modules/ // 排除 node_modules 目录
      },
      {
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        exclude: /node_modules/ // 排除 node_modules 目录
      }
    ]
  }
}

对于较为复杂的 loader，可以将它们设置为多个可调用的函数，以便在流水线上重复使用。

配置 plugin

webpack 插件可以在构建中适用额外的能力，例如压缩代码、去除冗余代码等。在使用插件时，应尽可能地削减插件数量，并注意插件的顺序（顺序错误可能导致功能失效）。

// javascriptcn.com 代码示例
const TerserPlugin = require('terser-webpack-plugin')
const CompressionPlugin = require('compression-webpack-plugin')

module.exports = {
  plugins: [
    new TerserPlugin(), // 压缩代码
    new CompressionPlugin() // Gzip 压缩
  ]
}

使用缓存

webpack 会在内存中缓存部分中间处理结果，以便在下一次构建中重用。缓存可以大大减少构建时间，因此应尽可能地使用缓存。

在 webpack 配置文件中，可以通过配置 cache 属性启用缓存功能：

module.exports = {
  cache: true
}

启用多线程构建

启用多线程构建可以将构建时间分摊到多个线程中，大大提高构建效率。使用 webpack-parallel-uglify-plugin 和 happy-loader 插件，可以使 webpack 构建实现多线程。

// javascriptcn.com 代码示例
const ParallelUglifyPlugin = require('webpack-parallel-uglify-plugin')
const HappyPack = require('happypack')

module.exports = {
  plugins: [
    new ParallelUglifyPlugin({
      cacheDir: '.cache/',
      uglifyJS: {
        output: {
          comments: false
        },
        compress: {
          warnings: false
        }
      }
    }),
    new HappyPack({
      loaders: ['babel-loader']
    })
  ]
}

使用动态连接库

动态连接库（DLL）是一种将常用代码预先打包并缓存起来的技术。通过使用 DLL，可以大幅度提升构建速度。

例如，将所有的第三方库打包到一个库文件中，并在开发环境中缓存起来：

// javascriptcn.com 代码示例
const webpack = require('webpack')
const vendors = [
  'react',
  'react-dom',
  'redux',
  'react-redux'
]

module.exports = {
  entry: {
    vendors: vendors
  },
  output: {
    path: path.join(__dirname, 'vendors'),
    filename: 'vendors.js',
    library: '[name]_[hash]',
  },
  plugins: [
    new webpack.DllPlugin({
      path: path.join(__dirname, 'vendors', '[name]-manifest.json'),
      name: '[name]_[hash]',
      context: __dirname,
    }),
  ]
}

在生产环境中，通过使用 DllReferencePlugin 插件可以快速引用 DLL 库：

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

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

总结

通过合理的 webpack 配置，我们可以很好地提升构建速度。在使用 webpack 进行开发时，应该尽可能地遵循优化原则，以便最大化地利用 webpack 的性能。同时，也应该注意保持代码的可维护性、可读性，并遵循最佳实践。

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