将vendor.js拆分为多个块

Question

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

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

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

Answer 1

是的。在 webpack 4 中，您可以使用splitChunks配置和SplitChunksPlugin来完成此操作，而在较低版本上，您可以使用AggressiveSplittingPlugin。尽管这些变化本身并没有多大帮助，因为总大小保持不变。

最好延迟加载一些库。为此，您可以动态导入库（或使用它们的模块/文件）而不是导入语句，但由于这是一个异步操作，因此需要重写代码逻辑。当您使用 Angular 时，使用特定于框架的延迟加载可能会更容易

另请注意：如果从多个模块使用库，并且一个模块动态加载它，而另一个模块使用 import 语句，则vendor无论如何它最终都会捆绑在一起，因此您需要确保对这些库的所有导入都是动态的。