webpack 打包js太大

Webpack 打包后的 JavaScript 文件过大可能会影响应用的加载速度和性能。以下是一些基础概念、原因分析、优化策略及示例代码：

基础概念

Webpack：一个模块打包工具，用于将多个模块和资源打包成一个或多个最终的静态资源文件。
Bundle：Webpack 打包后的文件。
Minification：压缩代码，移除不必要的字符（如空格、注释）以减小文件大小。

原因分析

未压缩代码：源代码包含大量空格、注释等。
重复代码：模块间存在重复依赖。
大文件引入：直接引入大型的第三方库。
未进行代码分割：所有代码打包成一个文件。

优化策略

代码压缩：使用 TerserPlugin 插件压缩 JavaScript 代码。
Tree Shaking：移除未使用的代码，依赖于 ES6 模块。
代码分割：将代码分割成多个小块，按需加载。
使用 CDN：将大型第三方库通过 CDN 引入，减少打包体积。
优化图片和字体文件：使用 url-loader 或 file-loader 进行优化。

示例代码

1. 使用 TerserPlugin 压缩代码

在 webpack.config.js 中配置：

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

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

2. Tree Shaking

确保使用 ES6 模块语法，并在 package.json 中设置 "sideEffects": false：

{
  "sideEffects": false
}

3. 代码分割

使用 SplitChunksPlugin 进行代码分割：

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

4. 使用 CDN

在 index.html 中引入大型库：

<script src="https://cdn.jsdelivr.net/npm/react@17/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom@17/umd/react-dom.production.min.js"></script>

并在 webpack.config.js 中配置 externals：

module.exports = {
  externals: {
    react: 'React',
    'react-dom': 'ReactDOM',
  },
};

5. 优化图片和字体文件

使用 url-loader 或 file-loader：

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg|eot|ttf|woff|woff2)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192, // 小于 8KB 的文件转为 base64 编码
            },
          },
        ],
      },
    ],
  },
};

通过以上策略，可以有效减小 Webpack 打包后的 JavaScript 文件大小，提升应用的加载速度和性能。