Angular6部署项目到服务器，第一次打开页面慢

刺骨的言语ヽ痛彻心扉 2021-12-23 07:35 235阅读 0赞

Angular6项目打包命令ng build,这种打包的压缩包大小一般都会很大的，我推荐使用ng build --prod --aot,这种打包的方法可以大大压缩压缩包的大小，大概可以压缩60%，但是一般会出现一些语法上的报错，比如一个变量在html中声明，但是没有在ts文件中赋值，那么就会出现报错，说语法错误，这种打包的方法就是非常的严谨，对语法上的要求更细节。

这样打包之后的文件部署到服务器上之后打开项目就会快乐不少，之前需要10s，现在需要5s左右，但是感觉还是很慢，所以我又想出了一个方法，路由懒加载，这是通过把路由的每一个部分分开在自己的路由模块加载，不会统一在app-routing里面一起加载，这样就大大减少了加载依赖文件main.js的大小，具体做法如下：

1、**ng generate module customer --routing **

customer是我们项目中的一个组建的名字这样我们就给customer穿件了一个路由模块和依赖模块，如下图：

![20190625220953605.png][]

2、之后我们需要在app-routing.ts文件中把之前的路由加载格式改成懒加载，具体代码如下

{
            path:'homepage',
            loadChildren:'./components/homepage/homepage.module#HomepageModule',
          },
          {
            path:'access-management',
            loadChildren:'./components/access-management/access-management.module#AccessManagementModule',
          },
          {
            path:'access-management/add-user',
            loadChildren:'./components/access-management/add-user/add-user.module#AddUserModule'
          },

3、然后在customer.module.ts文件中把这个组件需要引入的模块引入到ts文件中，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70][]

4、并且在customer-routing.ts文件中把路由引入，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1][]

5、最后用打包的命令ng build --prod --aot，打包之后就会把每一个的路由文件单独加载，并且生成单独的文件，如下图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3][]

这样把项目部署到服务器最后，每一个组建的路由就会单独加载，这样就会加快第一次加载页面的速度，做完这些之后页面打开只需要2s多一点，基本上符合大众的要求。

[20190625220953605.png]: /images/20211223/4e1d73277ca24d6db9e049b7d925e7ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70]: /images/20211223/5aab6899952e4003b51e1f3a9f797b06.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 1]: /images/20211223/dceaf9aef6a9470691e4b9d93d25854e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 2]: /images/20211223/0a62304301684ba48ed2dc8b729baa20.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjkzMTgyNQ_size_16_color_FFFFFF_t_70 3]: /images/20211223/ef7e9f1177b14e70b93c0ae3c7850891.png