如何使用Webpack进行前端性能优化？

使用Webpack进行前端性能优化主要可以通过以下几个方面：

1. 代码分割：通过动态导入或入口配置，将应用拆分成多个小块，按需加载，提高首次加载速度。
2. 资源压缩：使用TerserWebpackPlugin对JavaScript进行压缩，使用css-minimizer-webpack-plugin压缩css，减少文件体积
3. 图片优化：使用image-webpack-loader压缩图片，降低加载时间，改善用户体检。
4. 预加载和预取：使用Webpack的webpackPrefetch和webpackPreload提高资源加载效率。
5. 缓存管理：设置合适的缓存策略，通过hash文件名管理缓存，避免用户下载过期资源。
6. Tree Shaking：通过ES6模块的静态分析，去除未使用的代码，减小打包后的体积。

压缩js

webpack5 的话通过 terser-webpack-plugin 来压缩 JS，但在配置了 mode: production时，会默认开启

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  optimization: {
    minimize: true, // 必须开启压缩
    minimizer: [
      new TerserPlugin({
        parallel: true, // 启用多核压缩（默认使用CPU核心数-1）
        extractComments: false, // 不提取注释到单独文件
        terserOptions: {
          compress: {
            drop_console: process.env.NODE_ENV === 'production', // 生产环境移除console
            pure_funcs: ['console.log'] // 指定要移除的函数
          },
          format: {
            comments: false // 移除所有注释
          }
        }
      }),
    ],
  },
};

需要注意一个地方:生产环境会默认配置 terser-webpack-plugin ，所以如果你还有其它压缩插件使用的话需要将TerserPlugin 显示配置或者使用…，否则 terser-webpack-plugin 会被覆盖。

压缩css

压缩css我们使用css-minimizer-webpack-plugin。同时，应该把css提取成单独的文件，使用mini-css-extract-plugin

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const CssMinimizerPlugin = require('css-minimizer-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader, // 替代style-loader，提取CSS为文件
          'css-loader', 
          'postcss-loader' // 可添加Autoprefixer等后处理器
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: '[name].[contenthash:8].css', // 带hash的文件名
      chunkFilename: '[id].[contenthash:8].css'
    })
  ],
  optimization: {
    minimizer: [
      new CssMinimizerPlugin({
        minimizerOptions: {
          preset: [
            'default', 
            { 
              discardComments: { removeAll: true }, // 移除注释
              normalizeUnicode: false // 避免unicode转义问题
            }
          ]
        }
      })
    ]
  }
};

压缩图片

通过image-webpack-loader来实现

module.exports = {
  module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|webp)$/,
        use: [
          {
            loader: 'url-loader', // 或file-loader
            options: {
              limit: 8192, // 小于8KB转base64
              name: '[name].[hash:8].[ext]',
              outputPath: 'static/images' // 输出目录
            }
          },
          {
            loader: 'image-webpack-loader',
            options: {
              mozjpeg: { progressive: true, quality: 65 }, // 渐进式JPEG
              optipng: { enabled: false }, // 禁用optipng（与pngquant冲突）
              pngquant: { quality: [0.65, 0.9], speed: 4 }, // PNG压缩
              gifsicle: { interlaced: false }, // GIF优化
              webp: { quality: 75 } // 转WebP格式
            }
          }
        ]
      }
    ]
  }
};

缓存策略优化

哈希文件名配置

module.exports = {
  output: {
    filename: '[name].[contenthash:8].js', // 基于文件内容生成hash
    chunkFilename: '[name].[contenthash:8].chunk.js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: './public/index.html',
      filename: 'index.[contenthash:8].html' // HTML也带hash
    })
  ]
};

代码分割

动态导入（按需加载）

// Webpack会将动态导入的模块自动拆分为独立chunk
// 使用魔法注释可指定加载策略（prefetch/preload）
const lazyModule = () => import(
  /* webpackChunkName: "lazy-module" */ 
  /* webpackPrefetch: true */ 
  './lazyModule.js'
);

// React中的路由懒加载（配合Suspense使用）
const Home = React.lazy(() => import('./views/Home'));

gzip

使用gzip对资源进行压缩