巧用 Webpack 生产环境配置

2023-09-22 04:56:25

Webpack 作为模块化打包工具，在前端开发中扮演着重要角色。本文将重点介绍如何使用 webpack 进行生产环境配置，以便在项目发布时提高代码质量，优化用户体验。

1. 代码压缩

代码压缩是生产环境中不可或缺的步骤，它可以减少代码体积，提高加载速度。Webpack 提供了多种代码压缩插件，其中 uglifyjs-webpack-plugin 最为常用。

1.1 安装 uglifyjs-webpack-plugin

npm install uglifyjs-webpack-plugin --save-dev

1.2 配置 uglifyjs-webpack-plugin

在 webpack 配置文件中加入以下代码：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new UglifyJsPlugin({
      // ...配置项
    })
  ]
};

1.3 配置 uglifyjs-webpack-plugin 选项

uglifyjs-webpack-plugin 提供了丰富的配置选项，可以根据具体需求进行调整。以下是一些常用的配置项：

sourceMap：是否生成 Source Map，默认为 true。
parallel：是否启用并行压缩，默认为 true。
uglifyOptions：UglifyJS 的压缩选项，可以参考 UglifyJS 文档。

2. 代码拆分

代码拆分是将代码分为多个块，按需加载，从而减少初始加载时间。Webpack 提供了多种代码拆分策略，其中按需加载（Code Splitting）最为常用。

2.1 配置代码拆分

在 webpack 配置文件中加入以下代码：

module.exports = {
  // ...其他配置
  optimization: {
    splitChunks: {
      // ...配置项
    }
  }
};

2.2 配置代码拆分选项

splitChunks 提供了丰富的配置选项，可以根据具体需求进行调整。以下是一些常用的配置项：

chunks：指定要拆分的块类型，默认为 async 和 initial。
minSize：指定拆分块的最小体积，默认为 30kb。
maxSize：指定拆分块的最大体积，默认为 50kb。
cacheGroups：指定拆分块的规则，可以按需拆分。

3. 样式分离

样式分离是将样式从 JavaScript 代码中分离出来，单独加载，从而减少初始加载时间。Webpack 提供了多种样式分离方案，其中 ExtractTextWebpackPlugin 最为常用。

3.1 安装 ExtractTextWebpackPlugin

npm install extract-text-webpack-plugin --save-dev

3.2 配置 ExtractTextWebpackPlugin

在 webpack 配置文件中加入以下代码：

const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new ExtractTextPlugin({
      // ...配置项
    })
  ]
};

3.3 配置 ExtractTextWebpackPlugin 选项

ExtractTextPlugin 提供了丰富的配置选项，可以根据具体需求进行调整。以下是一些常用的配置项：

filename：指定输出的 CSS 文件名，默认为 [name].css。
allChunks：是否将所有块的样式都提取到一个文件中，默认为 false。
disable：是否禁用插件，默认为 false。

4. 优化 CSS 压缩

除了代码压缩之外，还可以对 CSS 代码进行压缩，以减少文件体积。Webpack 提供了多种 CSS 压缩插件，其中 optimize-css-assets-webpack-plugin 最为常用。

4.1 安装 optimize-css-assets-webpack-plugin

npm install optimize-css-assets-webpack-plugin --save-dev

4.2 配置 optimize-css-assets-webpack-plugin

在 webpack 配置文件中加入以下代码：

const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    new OptimizeCssAssetsPlugin({
      // ...配置项
    })
  ]
};

4.3 配置 optimize-css-assets-webpack-plugin 选项

optimize-css-assets-webpack-plugin 提供了丰富的配置选项，可以根据具体需求进行调整。以下是一些常用的配置项：

assetNameRegExp：指定要压缩的 CSS 文件名正则表达式，默认为 /.css$/。
cssProcessor：指定 CSS 预处理器，默认为 cssnano。
cssProcessorOptions：指定 CSS 预处理器的选项，可以参考 cssnano 文档。

5. 配置示例

以下是一个完整的 webpack 生产环境配置示例：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    filename: '[name].[chunkhash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new UglifyJsPlugin({
      sourceMap: true,
      parallel: true,
      uglifyOptions: {
        compress: {
          drop_console: true
        }
      }
    }),
    new ExtractTextPlugin({
      filename: '[name].[contenthash].css',
      allChunks: true
    }),
    new OptimizeCssAssetsPlugin({
      assetNameRegExp: /\.css$/g,
      cssProcessor: require('cssnano'),
      cssProcessorOptions: {
        safe: true,
        discardComments: {
          removeAll: true
        }
      }
    })
  ],
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 30000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true
    }
  }
};