Angular6项目在tomcat加载速度慢的问题解决方法

Angular2+版本,Anuglar1请移步

简单粗暴,Angular6  ng build 生成的项目直接丢到tomcat的webapps下,localhost:8080/Project,速度还可以嘛。

把项目丢到云服务器,打开浏览器访问,加载速度感人,10s+打开一个网站,蓝瘦

废话不多说,直接贴方法

一、在Angular端优化

编译项目时不要用ng build,否则编出来的项目无敌大,用上ng build --prod

后面的参数会把没用的都删掉,编出来的包直接小60%

二、在Tomcat端优化

开启tomcat的gzip功能,原理很简单,浏览器加载到的是服务器压缩后的包,浏览器自己再解压,速度至少提高2倍以上

 

1.打开tomcat下的server.xml文件

Angular6项目在tomcat加载速度慢的问题解决方法

找到该段代码,修改代码为

Angular6项目在tomcat加载速度慢的问题解决方法

参数解释 compression -- 开启gzip

                 compressionMinSize -- 最小压缩大小  当文件大于这个值才进行压缩,如果小文件压缩完有可能比原文件都大

                 大小为BIT 2048即是2K

                noCompressionUserAgents -- 不压缩的浏览器  不知道干吗用

                compressableMimeType -- 压缩的类型,不知道的可以打开浏览器F12

Angular6项目在tomcat加载速度慢的问题解决方法

               useSendfile -- 这个很重要,不关闭的话压缩是无效的

搞定后的图是这样的

Angular6项目在tomcat加载速度慢的问题解决方法

注意看红色框框部分 如果没生效的话是不会有这个的

我的网页原本是6s加载完的,现在Angular6项目在tomcat加载速度慢的问题解决方法