angular7项目不同的打包方式之间的对比

女爷i 2021-12-11 12:55 373阅读 0赞

在angular项目中，不同的打包方式发布之后加载的速度不同。所以在打包的时候一定要使用正确的打包姿势。

#### 总体对比 ####

相同项目不同打包方式:

<table> 
 <thead> 
  <tr> 
   <th>命令</th> 
   <th>效果</th> 
   <th>体积</th> 
   <th>代码体积</th> 
   <th>加载速度</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ng build</td> 
   <td>相当于开发环境</td> 
   <td>体积最大</td> 
   <td>23.6M</td> 
   <td>&gt;=6.08s</td> 
  </tr> 
  <tr> 
   <td>ng build --prod</td> 
   <td>angular预编译</td> 
   <td>体积最小</td> 
   <td>3.71M</td> 
   <td>&gt;=2.32s</td> 
  </tr> 
  <tr> 
   <td>ng build --prod --aot</td> 
   <td>angular预编译</td> 
   <td>体积最小</td> 
   <td>3.71M</td> 
   <td>&gt;=2.07</td> 
  </tr> 
 </tbody> 
</table>

#### ng build直接构建，效果同开发环境 ####

网络请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]  
代码结构

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]

#### ng build --prod ####

网络请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]  
代码结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]

#### ng build --prod --aot ####

网络请求  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 4]

目录结构  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]

#### 域名访问 ####

以上都是直接通过ip访问，下面通过域名访问  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 5]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70]: /images/20211211/5d82ee56a7b24e9cbc28cce8b778c445.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 1]: /images/20211211/77593e335e7f4e2882585d8f22cfde83.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 2]: /images/20211211/cce665d61717429d99423fea1f60e01d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 3]: /images/20211211/9a82fd02be0f42ec87283734b8a7ad3b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 4]: /images/20211211/6d6d7d9e69f34b58a45b8699aa852299.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l3MDB5dw_size_16_color_FFFFFF_t_70 5]: /images/20211211/725477d9b9504f77b1e3d1311bf06e56.png