将 vendor.js 拆分为多个块

【问题标题】：Split vendor.js in to multiple chunks将 vendor.js 拆分为多个块
【发布时间】：2023-03-20 19:05:01
【问题描述】：

我正在使用 Angular cli 开发 Angular 5 项目。我在网站开发中使用了一些 npm 模块。当我创建生产版本时，它会生成大小以 MB 为单位的 vendor.js，因为当用户第一次打开它时，该网站的加载速度非常慢。

我尝试在构建 ng build --prod --aot --buildOptimizer 时添加一些额外的参数，但与其他文件相比，它的大小仍然相当大。

在 webpack 中有什么方法可以将 vendor.js 拆分为多个文件或减少文件或延迟加载 vendor.js 文件？

【问题讨论】：

【解决方案1】：

是的。在 webpack 4 中，您可以使用 splitChunks 配置和 SplitChunksPlugin 来实现，而在较低版本上，您可以使用 AggressiveSplittingPlugin。尽管这些更改本身并没有太大帮助，但总大小保持不变。

最好lazy-load一些图书馆。为此，您可以动态导入库（或使用它们的模块/文件）而不是导入语句，但由于这是一个异步操作，因此需要重写代码逻辑。当您使用 angular 时，使用 framework-specificlazy-loading 可能更容易

另一个注意事项：如果库是从多个模块中使用的，并且一个是动态加载它，而另一个是 using import 语句，它最终会在vendor bundle 中，所以你要确保对这些库的所有导入都是动态的。

【讨论】：