angular - 将 vendor.js 拆分为多个 block

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 .尽管这些变化本身并没有多大帮助，因为总大小保持不变。

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

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