网站加载问题：Angular 6 项目加载时间过长答案

【问题标题】：Site loading issue: Angular 6 project taking too much time to load网站加载问题：Angular 6 项目加载时间过长
【发布时间】：2019-05-12 14:07:48
【问题描述】：

在上图中，很明显我的应用程序第一次加载花费了太多时间（如图所示 3 分钟）。我找不到真正的原因。

关于我的申请的一些细节：

我的项目中总共只有 13 个组件。
我没有使用延迟加载，因为在我看来它不够大，无法使用延迟加载。因为构建后 main.js 文件大小只有 2.4 MB
为了缩小文件大小，我什至删除了 spec.ts 文件和不需要的 .scss 文件。
整个项目有6个.svg文件。
这是我用于构建的命令。 ' ng-build --prod --aot '

如果需要任何进一步的细节，我会提供，请帮助我找出延迟背后的实际原因。

【问题讨论】：

2.4 MB 对于生产版本来说不算大？？？那有什么大不了的？ spec.ts 文件根本不参与包大小
您是否尝试过消除 https 并查看问题是否在标准 http 上仍然存在？除此之外，我建议在您的互联网连接上运行速度测试，如果这是一个内部网络解决方案，那么开始对内部网络上的文件传输运行速度测试。
根据时间线截图，看起来时间花在网络上获取您的代码 - 如果我没记错 Chrome 的颜色编码，那么时间花在下载响应上。您应该仔细检查您的网络配置。

标签： javascript css angular performance sass

【解决方案1】：

利用角度路由器和模块延迟加载。例如创建相关组件的模块，当访问 vie 时加载特定的 js 文件

在示例中，当访问customer 路由时，它将加载相关的 js 文件，其他模块也是如此

const routes: Routes = [
  {
    path: 'customers',
    loadChildren: './customers/customers.module#CustomersModule'
  },
  {
    path: 'orders',
    loadChildren: './orders/orders.module#OrdersModule'
  }
];

您也可以运行ng build --prod。这将压缩代码，将消除死代码

【讨论】：

非常感谢您的建议。我将尝试使用延迟加载转换我的代码..这可能会解决问题
延迟加载是唯一的解决方案吗？有没有其他方法可以解决这个问题。因为此时转换我的整个代码会造成一些混乱。所以只是问

【解决方案2】：

可以是13个组件，6K行代码。组件数量无关紧要，代码复杂度才是。
延迟加载不会减少包的大小：延迟加载是 在询问时而不是 在收到时加载 Javascript 的功能
spec 文件不会出现在构建中，.scss 文件被编译成 JS（无论您使用内联样式还是 URL 样式，最终构建都没有区别）
参见第 1 点
同样，与第 1 点类似，这取决于您运行的命令和需要编译的代码。

我看不到图像，但您是否在应用程序上运行了lighthouse audit？它可能会告诉您可以改进的地方。

【讨论】：

非常感谢您的详细解释。除了延迟加载之外，还有其他方法可以解决这个问题。因为此时转换我的整个代码会造成一些混乱..
延迟加载不会改变你的代码（路由除外），你可以在几秒钟内实现它。如果您的目标是减少包大小，我建议您从模块中删除未使用的模块，删除未使用的依赖项，激活摇树，降低代码复杂度，实现服务器端渲染，延迟加载，最后，根据您的服务器，您可以根据你应用的URL加载文件。