性能优化之Angular前端优化总结
<p><strong><span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 102, 0, 1); font-size: 16px">简单总结接下我这边angular前端优化步骤都是满满的干货，各位客官有好的改进欢迎留言~</span></strong></p><p><strong><span style="font-size: 15px">1. 动静分离</span></strong></p>
<p>项目里面前端比较占用带宽的一般都是加载静态资源，请求后台接口一般占用带宽都是1kb左右，但是在加载静态资源往往会达到mb级别，占用大量带宽，明现影响了业务，所以动静分离是必须而且必要做的，angualr里面也会有指令来指定加载静态资源路径从而动静分离</p>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">ng build --deployUrl=指定域名/</pre>
</div>
<p><strong>2.js ,css 代码压缩</strong></p>
<p>angular编译的js基本都很大达到了mb级别，加载起来很占用带宽，不过angualr也提供了编译时压缩代码的功能，angular build指定为 --prod即可,你会发现压缩后代码成倍数的变小很恐怖哦，不过prod编译检查比较严格，会出现很多报错，另外这里多说一嘴，我自己也测试比较过，angular项目设置懒加载策略，压缩后的js还会进一步变小</p>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {
// 注释下面这一行可以激活延迟加载策略
// preloadingStrategy: PreloadAllModules,
// useHash: true
});</pre>
</div>
<p><span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 0, 0, 1)"><strong>额外补充：ng build --prod --build--optimizer // 编译后进一步压缩文件的大小</strong></span></p>
<p><strong>3.CDN加速</strong></p>
<p>CND加速不用多说了也是必要优化步骤，可以自行百度，现在国内的共有云平台都有CND加速服务，腾讯云是免费使用</p>
<p><strong>4.nginx缓存</strong></p>
<p>一般做到上面3步，基本可以实现页面秒开了，但是打开页面还是会有请求服务器资源端会占用服务器端带宽，如果需要进一步优化可将一些访问量高的页面做nginx缓存，这样就不会走服务器</p>
<div class="cnblogs_Highlighter">
<pre class="brush:java;gutter:true;">events {
#的最大连接数（包含所有连接数）1024
worker_connections1024;## Default: 1024
}
http{
# 代理缓存配置 nginx根目录指定缓存文件夹 kawa_cachedata名字自己定义跟proxy_cache_path对应上
proxy_cache_path "./kawa_cachedata"levels=1:2 keys_zone=kawacache:256m inactive=1d max_size=1000g;
server {
listen 80;
location /{
#使用缓存名称
proxy_cache kawacache;
#对以下状态码实现缓存
proxy_cache_valid 200 206 304 301 302 1d;
#缓存的key为url地址
proxy_cache_key $request_uri;
add_header X-Cache-Status $upstream_cache_status;
#反向代理地址
proxy_pass http://127.0.0.1:8080;
}
}
}
</pre>
</div>
<p>上面的nginx配置基本就可以缓存页面了，如果页面修改需要刷新缓存就在url后面追加新的时间戳就可以了</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/hlkawa/p/11877017.html
頁:
[1]