angular nginx 部署优化

最新推荐文章于 2023-07-21 12:00:01 发布

xuanzangbuqima

最新推荐文章于 2023-07-21 12:00:01 发布

阅读量468

点赞数

文章标签： angular2

本文链接：https://blog.csdn.net/xuanzangbuqima/article/details/109287693

版权

angular nginx 部署优化

一、agular项目打包

1. ng build 打包， styles vendor 比较大，影响访问速度

chunk {main} main.js, main.js.map (main) 48.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 1.86 MB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 5.48 MB [initial] [rendered]

2. ng build --prod (具有以下优势)

预先(AOT)编译：预编译 Angular 的组件模板。
生产模式：部署到启用了生产模式的生产环境。
打包：把你的多个应用于库文件拼接到少量包（bundle）中。
最小化：删除多余的空格、注释和可选令牌。
混淆/丑化：重写代码，使用简短的、不容易理解的变量名和函数名。
消除死代码：删除未引用过的模块和很多未用到的代码。
```
chunk {} runtime.acf0dec4155e77772545.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main.28f4921326919c266873.js (main) 661 kB [initial] [rendered]
chunk {2} polyfills.35a5ca1855eb057f016a.js (polyfills) 36 kB [initial] [rendered]
chunk {3} styles.0af0214cf3e0e7be64a3.css (styles) 485 kB [initial] [rendered]
```
二、项目模块懒加载

项目功能模块话，这也是angular所提倡的，路由懒加载，用的时候才进行加载请求，大大减少了初次访问请求的数据量

三、nginx 简单优化

开启gzip 压缩，访问速度极大提升

location / {
    root   /usr/share/nginx/html/dist
    index  index.html index.html;
    
    try_files $uri $uri/ /index.html =404;
}

gzip  on;
#启用gzip压缩的最小文件
gzip_min_length 1k;

#gzip 压缩级别， 1-10，数字越大压缩越好，但cpu消耗越高,且压缩效果不会明显提升，一般设置在2-4
gzip_comp_level 9;

#压缩的文件类型
gzip_types  text/css application/javascript application/x-javascript text/javascript  application/octet-stream application/font-woff;