我的项目使用 Angular 7 版本，这是我的 angular.json 配置文件：
。
当我进行生产环境构建时，我的 main.js 文件太大了，将近 12MB，导致应用程序加载页面非常缓慢。初始加载需要 4-5 分钟左右。
以下是构建结果：
以下是分析结果： 
提前感谢。
。当我进行生产环境构建时，我的 main.js 文件太大了，将近 12MB，导致应用程序加载页面非常缓慢。初始加载需要 4-5 分钟左右。
以下是构建结果：
以下是分析结果：
提前感谢。Angular主文件main.js大小过大
10
- VinoPravin
10
5试试看Webpack Bundle Analyzer：https://coryrylan.com/blog/analyzing-bundle-size-with-the-angular-cli-and-webpack。 - Pace
虽然这可能令人沮丧，但似乎在此并没有直接的编程问题被问到。而且问题的性质似乎需要更多的复现和调试。正如 @Pace 所说，分析 bundle 是一个好的起点。 - user10747134
2你用了什么命令来构建它？ - wentjun
没有，我还没有尝试过，@wentjun。 - VinoPravin
是的，使用适当的懒加载！ - VinoPravin
显示剩余5条评论
3个回答
6
将占用过多空间的文件拆分成模块，并应用懒加载技术。
- Prashanthi
5
我的构建包含一个大小为12MB的main.js文件，应用懒加载能解决这个大文件大小的问题吗？@Prashanthi - VinoPravin
将您的大模块（app.modules）分成多个子模块，每个子模块的最大大小应小于3 MB，然后对这些模块应用惰性加载。您将看到性能大幅提升。 - Prashanthi
1是的，问题在于我已经使用了懒加载功能。我的应用程序模块和其他5个模块都存在问题，但我不知道具体出了什么错。 - VinoPravin
当您查看上面的图像时，我不知道为什么它显示main.ts + 357个模块（已连接）。 - VinoPravin
这个答案只告诉我们要做什么，但没有告诉我们如何做。 - Martin Schneider
6
首先，停止使用webpack捆绑分析器，因为它不能准确地表示捆绑空间。开始使用source-map-explorer。
根据Angular文档，如果在懒加载模块之外导入任何内容，则将包括在您的main.js捆绑中。我曾遇到一个问题，即在每个模块中都导入共享模块，而共享模块本身从
node_modules导入了许多包，从而导致main.js文件增大。
- Aniket Sanadhya
2
1这是我遵循的步骤：
- 确定了我的主bundle中所包含的js文件。
- 我已经实现了模块的懒加载，但是发现还可以将其他一些组件也包含在它们的懒加载模块中。
- 我开始将一个大的共享模块分解成更小的常用组件共享模块，并将它们添加到懒加载模块的导入中。
你如何懒加载共享模块？因为它不会有路由。 - Gerardo Buenrostro González
1
如果您尝试使用lazyload模块仍然无法正常工作，请将
tsconfig.json模块从commonjs更改为es2020，并在package.json中添加sideEffects: false，然后就可以了。
完整的解释我在这里讲述 https://dev59.com/81gR5IYBdhLWcg3wV8Le#72342681
另外，你可以在服务器上使用g-zip来加速。
- Hiep Tran
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接