详解angularjs4部署文件过大解决过程


Posted in Javascript onDecember 05, 2018

这是我人生的第一篇文章,写得不好,请见谅!

本人是一个java web开发工程师,对angularjs4小有接触,最近看到一个漂亮的angularjs4的后台模板?angle,于是就在CSDN下载来测试一下,点击这里下载

模板的一些照片

详解angularjs4部署文件过大解决过程 

详解angularjs4部署文件过大解决过程

相信有经验的都知道,要运行先安装nodejs,配置nodejs环境等等,这里就不细说了,网上有很多这样的文章,而我参考的文章是,点击这里

所有东西都搞掂了,然后就是打包部署,放在服务器玩玩了, 

下面就是我遇到的问题和解决办法:

1、ng build 打包,加载的js文件高达8.6M

ng build

在本地nginx或者tomcat直接运行,感觉还不错,还以为就这么的搞掂了,真的很开心!直接就把它用winFcp复制到自己阿里云上,打开主页,瞬间懵逼了。好慢好慢,等了2分多钟才打开了这个页面。

详解angularjs4部署文件过大解决过程 

详解angularjs4部署文件过大解决过程

肯定我这里出问题,因为我上angle页面demo是这样子,看下面的图

详解angularjs4部署文件过大解决过程 

详解angularjs4部署文件过大解决过程

于是我百度了一下,发现ng build是有模式选择的,打包是用生产模式(?prod)

2、ng build ?prod打包,这次优了点js 4.1M

ng build --prod
ng build --prod --aot

这两个代码是一样,我也不知道开始?prod就默认开启aot了

这里,?prod参数后,angular-cli会把用不到的包都删掉,而?aot参数是让angular-cli启动预编译特性

在命令行中输入这个代码,出现了问题了,报错:Module not found: Error: Can't resolve ‘./$$_gendir/app/app.module.ngfactory'

很多我找了到问题的解决办法

是因为angular-cli 的版本有点低了,通过下面的代码来升到最新的版本

npm install --save-dev @angular/cli@latest

终于可以,看看效果如何,
详解angularjs4部署文件过大解决过程 ‘

详解angularjs4部署文件过大解决过程 

少是少了很多,但远远不够,问题出在哪呢?

能有什么办法?也只能继续百度了,我发现了ng serve这段代码,ng serve是启动一个小型web服务器,用于托管应用。

ng serve --prod --aot

惊奇发现,js文件只有1.1M比官网略优啊

详解angularjs4部署文件过大解决过程 

详解angularjs4部署文件过大解决过程

那疑问就来了,难道我要在服务器上架开发环境,好像不太现实吧。

3、nginx开启gzip优化,这次js是1.2M

又开始了我的百度之旅,我发现了一个东西 — gzip,是在nginx上开启gzip,优化访问速度

于是,我就在nginx上加了这段代码

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 2;
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;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";

文章中没说这段东西放在哪,这里说以下,放在server括号里面就可以了。

最后的结果,如下

详解angularjs4部署文件过大解决过程 

详解angularjs4部署文件过大解决过程

但是,这好像和官网的demo还是有点差距啊,可能改以下gzip会有更好的效果,同时我还发现了一个问题,这个模板是把所有的东西都加载完才打开页面,其实有的东西是可以后面再加载的,所以接下来我就要在模板自身来优化了。

等我找到更好的优化方法会及时更新,谢谢大家,如有错误,请指出

2017年9月15日晚上更新

在上个星期,我已经优化了不少了,

详解angularjs4部署文件过大解决过程 

详解angularjs4部署文件过大解决过程 

自从上次写完这贴后,我就继续上网搜一下优化方法,我找到一天文章说,先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这个文件少了一半

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 静态动态成员 and 信息的封装和隐藏
May 29 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
JavaScript获得当前网页来源页面(即上一页)的方法
Apr 03 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
超赞的jQuery图片滑块动画特效代码汇总
Jan 25 Javascript
electron demo项目npm install安装失败的解决方法
Feb 06 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
解决包含在label标签下的checkbox在ie8及以下版本点击事件无效果兼容的问题
Oct 27 Javascript
谈谈JavaScript中的垃圾回收机制
Sep 17 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
Dec 05 #jQuery
关于RxJS Subject的学习笔记
Dec 05 #Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 #Javascript
详解如何在Angular优雅编写HTTP请求
Dec 05 #Javascript
JS+HTML5 canvas绘制验证码示例
Dec 05 #Javascript
详解关于Angular4 ng-zorro使用过程中遇到的问题
Dec 05 #Javascript
JS实现简单的点赞与踩功能示例
Dec 05 #Javascript
You might like
php官方微信接口大全(微信支付、微信红包、微信摇一摇、微信小店)
2015/12/21 PHP
PHP中each与list用法分析
2016/01/08 PHP
php运行报错Call to undefined function curl_init()的最新解决方法
2016/11/20 PHP
设置下载不需要倒计时cookie(倒计时代码)
2008/11/19 Javascript
JavaScript 学习笔记(十二) dom
2010/01/21 Javascript
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
jquery实现文本框数量加减功能的例子分享
2014/05/10 Javascript
JS案例分享之金额小写转大写
2014/05/15 Javascript
一行命令搞定node.js 版本升级
2014/07/20 Javascript
Javascript 完美运动框架(逐行分析代码,让你轻松了运动的原理)
2015/01/23 Javascript
动态更新highcharts数据的实现方法
2016/05/28 Javascript
AngularJS基础 ng-click 指令示例代码
2016/08/01 Javascript
jQuery autoComplete插件两种使用方式及动态改变参数值的方法详解
2016/10/24 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
JS实现DIV高度自适应窗口示例
2017/02/16 Javascript
javascript帧动画(实例讲解)
2017/09/02 Javascript
详解Angular5 服务端渲染实战
2018/01/04 Javascript
Vue登录注册并保持登录状态的方法
2018/08/17 Javascript
详解微信小程序开发之formId使用(模板消息)
2019/08/27 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
python3读取图片并灰度化图片的四种方法(OpenCV、PIL.Image、TensorFlow方法)总结
2019/07/04 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
快速查找Python安装路径方法
2020/02/06 Python
python模拟斗地主发牌
2020/04/22 Python
Pytorch使用PIL和Numpy将单张图片转为Pytorch张量方式
2020/05/25 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
基于HTML5 Canvas的3D动态Chart图表的示例
2017/11/02 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
联想智利官方网站:Lenovo Chile
2020/06/03 全球购物
工程招投标邀请书
2014/01/30 职场文书
元旦晚会策划方案
2014/02/18 职场文书
爱情保证书大全
2014/04/29 职场文书
Java并发编程必备之Future机制
2021/06/30 Java/Android
python之django路由和视图案例教程
2021/07/26 Python