使用Webpack整合Django与React时main.js过大及压缩报错求助

先处理Terser插件报错 #

1. 修复SVG Loader配置错误 #

你的webpack配置里SVG规则重复写了两次use，这会导致Webpack解析失败，进而触发Terser报错，修改为：

{
  test: /\.svg$/,
  use: [
    "@svgr/webpack",
    {
      loader: "svg-url-loader",
      options: {
        limit: 10000,
      },
    },
  ],
}

2. 调整Babel编译目标 #

当前Babel的targets设置为node:10，这是针对Node环境的编译规则，而你的代码是前端浏览器环境，改为浏览器适配目标：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ],
    "@babel/preset-react"
  ],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

这会让Babel生成更适配浏览器的代码，避免Terser处理异常语法。

3. 显式配置Terser插件 #

Webpack5默认集成Terser，但手动指定版本可避免兼容性问题，先安装依赖：

npm install terser-webpack-plugin@^5.3.6 --save-dev

再在webpack.config.js中配置：

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

module.exports = {
  // ...其他配置
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      parallel: true,
      terserOptions: {
        compress: {
          drop_console: true, // 生产环境移除console输出
        },
      },
    })],
  },
};

解决main.js体积过大问题 #

1. 拆分第三方依赖包 #

在webpack的optimization中添加代码分割配置，将React、ReactDOM等第三方库拆分到单独chunk：

optimization: {
  // ...已有的minimize配置
  splitChunks: {
    chunks: 'all',
    cacheGroups: {
      vendor: {
        test: /[\\/]node_modules[\\/]/,
        name: 'vendors',
        chunks: 'all',
      },
    },
  },
}

这会生成独立的vendors.js，减少main.js体积的同时，利用浏览器缓存提升加载速度。

2. 生产环境分离CSS文件 #

替换style-loader为mini-css-extract-plugin，将CSS从JS中分离：
先安装依赖：

npm install mini-css-extract-plugin --save-dev

修改webpack的CSS规则和插件：

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

module.exports = {
  // ...其他配置
  module: {
    rules: [
      // ...其他规则
      {
        test: /\.css$/i,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  plugins: [
    // ...其他插件
    new MiniCssExtractPlugin({
      filename: '[name].css',
    }),
  ],
};

3. 移除不必要的Node Polyfill #

如果你的React代码没有用到Node.js核心模块（如fs、path），直接删除NodePolyfillPlugin，它会引入大量冗余polyfill：

// 删掉这一行
// new NodePolyfillPlugin(),

4. 开启Gzip压缩 #

用Webpack生成gzip文件，再在Django中启用Gzip中间件：
安装依赖：

npm install compression-webpack-plugin --save-dev

添加到webpack插件：

const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
  // ...其他配置
  plugins: [
    // ...其他插件
    new CompressionPlugin({
      algorithm: 'gzip',
      test: /\.(js|css)$/,
      threshold: 8192,
      minRatio: 0.8,
    }),
  ],
};

在Django的settings.py中启用Gzip中间件：

MIDDLEWARE = [
    'django.middleware.gzip.GZipMiddleware',
    # ...其他中间件
]

内容的提问来源于stack exchange，提问作者Waqas