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

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

总体对比

相同项目不同打包方式:

命令 效果 体积 代码体积 加载速度
ng build 相当于开发环境 体积最大 23.6M >=6.08s
ng build --prod angular预编译 体积最小 3.71M >=2.32s
ng build --prod --aot angular预编译 体积最小 3.71M >=2.07

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

网络请求
angular7项目不同的打包方式之间的对比_第1张图片
代码结构

angular7项目不同的打包方式之间的对比_第2张图片

ng build --prod

网络请求
angular7项目不同的打包方式之间的对比_第3张图片
代码结构
angular7项目不同的打包方式之间的对比_第4张图片

ng build --prod --aot

网络请求
angular7项目不同的打包方式之间的对比_第5张图片

目录结构
angular7项目不同的打包方式之间的对比_第6张图片

域名访问

以上都是直接通过ip访问,下面通过域名访问
angular7项目不同的打包方式之间的对比_第7张图片

你可能感兴趣的:(angular)