详解angularjs4部署文件过大解决过程(2)

自从上次写完这贴后,我就继续上网搜一下优化方法,我找到一天文章说,先gzip压缩到,然后再上传到服务器会快很多,我尝试过,并没有得到这样的结论,在nginx上是可以开启缓存的功能的,它把项目gzip压缩后,然后缓存在服务器上,每次打开网站时,取的是gzip后的文件,说明你压缩再上传和上传后再配置压缩是一样的,并没有得到优化。
有VPN的我,转战了google,

我找到了一个比我还努力的哥们,地址

这位哥们从7.07s优化到732ms,从4.5M优化到317.5kb全过程,测试网址是点击跳转

其中有的是重复了,有的是不错的做法,如下

(1)实现缓存,实际操作过程,是在nginx中server上,添加了这段东西

location ~* \.(gif|jpe?g|png|ico|swf)$ { # d - 天 # h - 小时 # m - 分钟 expires 168h; add_header Pragma public; add_header Cache-Control "public, must-revalidate, proxy-revalidate"; } # 由于js和css文件需要改动,设置的时间为5分钟 location ~* \.(css|js)$ { expires 5m; add_header Pragma public; add_header Cache-Control "public, must-revalidate, proxy-revalidate"; }

(2)更改了gzip压缩参数,地址(可能是官网吧,反正做得很漂亮),gzip的压缩变成如下

gzip on; gzip_static on; gzip_comp_level 2; gzip_http_version 1.0; gzip_proxied any; gzip_min_length 1100; gzip_buffers 16 8k; gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png; # Disable for IE < 6 because there are some known problems gzip_disable "MSIE [1-6].(?!.*SV1)"; # Add a vary header for downstream proxies to avoid sending cached gzipped files to IE6 gzip_vary on;

(3)我发现项目打包的时候出错了,我把–AOT打成-AOT,一个一个符号只差就使得script.js这个文件少了一半

现在这次网页优化得比官网的还好了,如果还要弄的话,剩下的应该是减少了一下项目中没用的公共模块,可能又可以 减少一半,那就非常满意了,这个帖子算是终结了,主要是介绍了一下,我部署的全过程。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/7f4e7116418abdb3b831fd77aea944c4.html