我正在使用 angular cli 处理 Angular 5 项目。我在网站的开发中使用了一些 npm 模块。当我创建生产版本时,它会生成大小为 MB 的 vendor.js,因为当用户第一次打开该站点时,该站点的加载速度非常慢。
我尝试在构建时添加一些额外的参数 ng build --prod --aot --buildOptimizer
但与其他文件相比,它的大小仍然相当大。
在 webpack 中有什么方法可以将 vendor.js 拆分为多个文件或减少文件或延迟加载 vendor.js 文件吗?
最佳答案
是的。在 webpack 4 中你可以使用 splitChunks
配置和 SplitChunksPlugin ,而在较低版本上,您可以使用 AggressiveSplittingPlugin .尽管这些变化本身并没有多大帮助,因为总大小保持不变。
最好是lazy-load一些图书馆。为此,您可以动态导入库(或使用它们的模块/文件)而不是导入语句,但由于这是一个异步操作,因此需要重写代码逻辑。当您使用 angular 时,使用 framework-specific 可能更容易延迟加载
另一个注意事项:如果库从多个模块中使用并且一个正在动态加载它而另一个使用 import 语句,它最终会在 vendor
无论如何捆绑,因此您要确保对这些库的所有导入都是动态的。
关于angular - 将 vendor.js 拆分为多个 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50075963/