如何解决 webpack 打包后代码体积过大的问题？-JavaScript中文网-JavaScript教程资源分享门户

随着前端应用的复杂性不断提高，前端项目中使用的 JavaScript 代码量也越来越大。而 webpack 能够对前端项目中的 JavaScript 代码进行打包和压缩，但在某些情况下，webpack 打包后的代码体积仍然过大。这篇文章旨在介绍一些常见的优化 webpack 打包后代码体积的方法。

Tree Shaking

Tree Shaking 是指在打包过程中通过静态分析的方式检测并排除未被使用的代码。在 webpack 中，可以通过配置 optimization.usedExports 和 optimization.minimize 来开启 Tree Shaking 和代码压缩。

开启 Tree Shaking

首先，需要安装一个能够实现 Tree Shaking 的 JavaScript 模块打包器，比如 webpack。然后，在 webpack 配置文件中开启 Tree Shaking，如下所示：

const config = {
  // ...省略其他配置...
  optimization: {
    usedExports: true, // 只导出被使用的模块
  },
};

压缩打包后的代码

除了 Tree Shaking 外，压缩代码也是提高打包后代码体积的有效手段。webpack 内置了 UglifyJS 插件，可用来压缩打包后的代码。在 webpack 配置文件中，开启代码压缩，如下所示：

const config = {
  // ...省略其他配置...
  optimization: {
    minimize: true, // 压缩代码
  },
};

按需加载

按需加载是指让页面只在需要时才加载相应的 JavaScript。webpack 支持按需加载，可以将一些代码拆分成多个 chunks。可以使用 import() 函数来实现按需加载，例如：

import("./module")
  .then(module => {
    // 使用 module
  })
  .catch(error => {
    // 处理 import 异常
  });

使用 Dynamic import

使用 import() 函数时，webpack 会检查语法并将代码拆分成多个 chunks。而使用 Dynamic import 则更加灵活。Dynamic import 允许我们以编程方式加载模块。可以使用 import() 方法的返回值来实现按需加载和动态更新，如下所示：

async function getModule() {
  const module = await import("./module.js");
  // 使用 module
}

合并重复代码

有时，我们的代码包含很多重复的部分。如果我们将这些重复的部分合并起来，代码体积会进一步减小。webpack 4 引入了 SplitChunksPlugin，该插件能够将重复的代码合并成一个单独的文件。使用 SplitChunksPlugin 可以通过配置文件轻松实现代码合并。

// www.javascriptcn.com code example
const config = {
  // ...省略其他配置...
  optimization: {
    splitChunks: {
      // 抽离的公共代码
      name: "common",
      chunks: "initial",
      minChunks: 2,
    },
  },
};

去除无用代码

去除无用代码也是如何优化 webpack 打包后代码体积的有效方法。webpack 内置了 DeadCodePlugin 可以在构建过程中自动删除对应的代码。

// www.javascriptcn.com code example
const config = {
  // ...省略其他配置...
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new webpack.optimize.AggressiveMergingPlugin(),
    new webpack.optimize.CommonsChunkPlugin({
      name: "vendor",
      minChunks: function (module) {
        //....省略代码
      },
    }),
    new webpack.optimize.MinChunkSizePlugin({
      minChunkSize: 30000,
    }),
    new webpack.DefinePlugin({
      "process.env.NODE_ENV": JSON.stringify("production"),
      // todo: 里面是全局变量
      STATE: JSON.stringify(__STATE__),
    }),
    new webpack.ContextReplacementPlugin(
      /moment[/\\]locale$/,
      /zh-cn/,
    ),
    new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
    new DeadCodePlugin({
      patterns: [
        "path/to/your/assets/*.js",
        "!path/to/your/assets/vendor/*.js",
      ],
    }),
  ],
};

结语

以上是优化 webpack 打包后代码体积的一些方法，开发者们可以根据具体需要选择其中的方法进行优化。在日常开发中，我们还需要遵循一些优秀的编程规范，如避免重复代码等，以确保项目代码体积合理、可维护性高。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d63b3ba941bf7134becf0a

如何解决 webpack 打包后代码体积过大的问题？