总结

webpack 会自动识别 import() 来做代码分割。只要在组件或者路由上确保使用 import() 来异步加载即可。

在 Webpack 中，我们可以通过按照路由拆分代码来优化应用程序的性能和加载速度。下面是实现这两个功能的一些步骤：

1、路由支持懒加载

需要我们在路由器（如 React Router、Vue Router 等）配置中使用 ES 模块的import()语法来导入路由对应的视图组件

const About = () => import("./About");

2、代码拆分、公共代码提取

我们可以配置splitChunks，可以配置最大体积，最大数量等配置来实现对代码的合理拆分。同时可以将将共享的代码块从应用程序代码中提取出来，以便更好地利用缓存，并减少重复加载的代码。

 // 代码分割配置
    splitChunks: {
      chunks: "all", // 对所有模块都进行分割
      // 其他内容用默认配置即可
    },

3、避免文件名重复

• 配置 Webpack 的output.filename选项为使用[name].[chunkhash].js的格式
• 同时我们可以使用魔法注释，给路由起个名字，来保证生成唯一的文件名。

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24