详解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 相关文章推荐
判断JavaScript对象是否可用的最正确方法分析
Oct 03 Javascript
写出更好的JavaScript之undefined篇(上)
Nov 22 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
JS中prototype关键字的功能介绍及使用示例
Jul 21 Javascript
jquery中获取元素里某一特定子元素的代码
Dec 02 Javascript
详解Bootstrap按钮
Jan 04 Javascript
使用BootStrap实现用户登录界面UI
Aug 10 Javascript
jquery.form.js异步提交表单详解
Apr 25 jQuery
Vue filters过滤器的使用方法
Jul 14 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
详谈innerHTML innerText的使用和区别
Aug 18 Javascript
js实现带箭头的进度流程
Mar 26 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 screw加密php源代码
2013/06/20 PHP
PHP简单获取网站百度搜索和搜狗搜索收录量的方法
2016/08/23 PHP
PHP 文件锁与进程锁的使用示例
2017/08/07 PHP
PHP实现的最大正向匹配算法示例
2017/12/19 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Jquery作者John Resig自己封装的javascript 常用函数
2009/11/09 Javascript
JQuery优缺点分析说明
2010/06/09 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
在javascript中如何得到中英文混合字符串的长度
2014/01/17 Javascript
JS实现页面超时后自动跳转到登陆页面
2015/01/19 Javascript
常用Javascript函数与原型功能收藏(必看篇)
2016/10/09 Javascript
ng2学习笔记之bootstrap中的component使用教程
2017/03/09 Javascript
基于zepto.js实现手机相册功能
2017/07/11 Javascript
用最少的JS代码写出贪吃蛇游戏
2018/01/12 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
layui-table表复选框勾选的所有行数据获取的例子
2019/09/13 Javascript
vue+layui实现select动态加载后台数据的例子
2019/09/20 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
jQuery实现可以计算进制转换的计算器
2020/10/19 jQuery
[02:20]DOTA2英雄基础教程 黑暗贤者
2013/12/19 DOTA
python中as用法实例分析
2015/04/30 Python
Python实现字典依据value排序
2016/02/24 Python
详解python 发送邮件实例代码
2016/12/22 Python
python八大排序算法速度实例对比
2017/12/06 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
解决python3捕获cx_oracle抛出的异常错误问题
2018/10/18 Python
Python openpyxl 遍历所有sheet 查找特定字符串的方法
2018/12/10 Python
Python实现微信翻译机器人的方法
2019/08/13 Python
python实现简单学生信息管理系统
2020/04/09 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
总会计师岗位职责
2014/02/19 职场文书
欢度春节标语
2014/07/01 职场文书
格列佛游记读书笔记
2015/06/30 职场文书
2019最新版股权转让及委托持股协议书范本
2019/08/07 职场文书
使用opencv-python如何打开USB或者笔记本前置摄像头
2022/06/21 Python