zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】

前言:

  在我前面的博客,angular项目总结——angular + browserify + gulp + bower + less 架构分享  把我开发angular的架构进行了分享,并上传到了github https://github.com/zimv/zmNgFrameWork 。

而后我又在我的 gulp系列 里分享了 gulp-rev:项目部署缓存解决方案----gulp系列(六) ,也更新了github上gulpStart的rev分支 https://github.com/zimv/gulpStart, rev 分支 。

  最近我在更新这个项目,把angular1.4.7更新到了1.5.5,关于angular的升级,我想说性能方面有提升,载入速度和流畅度都得到了提升。

比较坑的一点,我似乎安装错包了,之前的路由hash是用#,升级之后变成了#!,甚至控制台会报一些不影响任何功能的错误。

我打开angular.min.js,发现里面version显示的是 1.5.5-build.4567。于是我又重新bower安装了1.5.5,

版本注释信息才变成了version:1.5.5。这个时候路由hash才是正常的#,之前的报错也不存在了。

  毕竟还是1.x,升级之后并没有需要修改代码什么的,api是兼容的。关于升级1.5.5就说到这里。

  升级后,我把zmNgFrameWork 分为三个分支1.4.71.5.5 1.5.5&md5-cache。如果需要md5方案,可以用1.5.5&md50cache这个分支。

md5方案:

  md5的缓存部署是现在比较合适和流行的解决方案。根据目前项目和架构,我觉得可以在zmNgFrameWork引入此项配置。

项目中的构建工具,我使用的是gulp,gulp-rev就是解决当前问题的插件。

gulp-rev的基本用法这里我就不做过多介绍,需要了解的可以先看这篇文章 gulp-rev:项目部署缓存解决方案----gulp系列(六) 。

  

  升级前,再啰嗦一下,我们最终需要达到什么效果(以下截图使用gulpStart里的实例):

  

如图可以看出

最终build的css和js后缀都带有md5签名,rev.json是存储文件名路径的。(我们把这一步骤叫做 ① )

最终html里的文件名路径要和build同步(我们把这一步骤叫做 ② )

要实现一键gulp就把这一切事情做好,就需要我们来配置它:

配置less:

  (1) 首先还是在zmNgFrameWork npm安装依赖gulp插件:

npm install --save-dev gulp-rev
npm install --save-dev gulp-rev-collector

  gulp-rev 来实现 步骤 ①

  gulp-rev-collector 实现 步骤 ②

  (2)先配置gulp的css任务,打开less.js

require gulp-rev,并加入方框内的代码。

A 执行在gulp.dest之前,这样输出的文件将会带上md5签名,

B 执行在gulp.dest之后,这样将会输出存储文件名路径的rev.json到指定文件夹,

如此一来 步骤 ① 就完成了

  (3) 新建rev-collector任务,配置好revJson的文件夹路径和html路径,执行这个任务的时候,gulp会找到所有rev.json,与html里的路径匹配,最终就完成了 步骤 ②

  对,这篇文章不是教大家怎么使用gulp-rev的~ 以上只是简单介绍配置less并大致回顾一下。

回顾:

  我们再来回顾一下,zmNgFrameWork 的架构:

  

  (1)单页面应用,目前只有一个入口,根目录的index.html

  (2)src:

    common 包含主要的less(三方库、抽象层和通用样式),所有图片,和一部分js工具

    modules 所有模块,模块层的less样式,模块的template,模块的控制器、服务和指令

    主模块app.js 将会依赖注入所有 modules 文件夹的子模块

  (3) build:

    所有图片会被打包到build->common->img,所有css样式最终打包为一个css,被index引用

    模块的所有控制器、服务和指令打包为一个js,被index引用

    主模块app.js,被index引用

继续配置:

  配置md5缓存部署方案,将会让build里所有js和css加上md5签名,并且更新到index.html中。

根据之前的配置,css已经Ok了,如下图:

  gulp的时候新建了一个临时输出文件build:temp-build,最开始我其实是直接把rev文件夹放在build文件夹里的,

后来觉得build里面的所有文件都应该是用来部署的静态资源,不需要这些预编译的临时文件。

所以就创建了temp-build作为预编译文件的临时存储。

  做到这一步其实还算顺利,而后我开始配置js的md5。

在配置过程中,按照之前的写法,我发现gulp会出现报错。

  报错的意思是当前管道流不支持。我想这是gulp-rev 不兼容browserify的管道的原因。

而后我用一个新任务rev-js,把browserify打包好的js,载入到gulp管道,再执行一次输入输出,就能成功生成md5签名了。

但是这个时候build里面会变成这样:

build里面会存在browserify执行后的无签名的js和md5签名的js。

不应该在build里面有预编译文件,于是也同样把browserify生成的js放到临时文件夹里去。

好了 一切OK。现在 步骤 ① 全部完成。

  最后再执行一次rev-collector任务,把 步骤 ①  生成的rev.json和index.html进行匹配

现在 步骤 ② 全部完成。

曲折:

  看起来很简单嘛~但是过程还有有点曲折。

特别有一件曲折的事情,我已经同步处理了gulp任务执行顺序,使用gulp-sync

rev-js要操作browserify生成的文件,所以要执行在browserify之后,下图是cmd下gulp执行的日志:

rev-js确实是执行在browserify之后,但是我发现rev-js并没有输出任何东西。

当我执行完gulp default之后,rev-js像是没有运行一样,什么也没输出。

而后我再单独运行一下rev-js任务,这个时候就有输出了(因为这个时候browserify已经完全执行完毕)!

  后来纠结了很久,又遇到了各种情况,又发生了各种猜测和验证实验。最终的结论确是:

gulp-aync无法获取browserify的管道,也无法得知它的任务是否完成。之所以gulp日志里面显示的是完成,不过是gulp默认的处理而已。

而后,我给rev-js任务加上了延迟,rev-js延迟之后,还需要给rec-collector延迟,rev-collector依赖rev-js。这样才勉强能完成工作。

暂时没有想到更好的办法了。加上延迟之后,gulp-aync无法正确判断它是否完成了任务,所以也会默认处理为完成。

不过这里这样使用暂时不会造成其他问题,这种处理方式实在不优雅。

当然我也想过在browserify任务里,添加监听事件,但是根据目前里面的逻辑,我觉得最好不要那么做。

如果能使node的pipe同步就好了,可以吗?好像不行~求大牛指点!!

小结:

  架构调整和升级是一件有风险,又非常有意思的事情。而最终的目的还是适应业务、提升效率、解决问题。

  最后奉上zmNgFrameWork 运行后的样子,两个测试页面:

时间: 2024-11-05 23:11:46

zmNgFrameWork 架构升级ng1.5和md5静态资源缓存方案【angular1.x】的相关文章

大公司的静态资源优化方案

今天看到一篇关于浏览器缓存问题的文章,觉得很不错(大神就是牛叉呀). 大公司的静态资源优化方案,基本上要实现这么几个东西:. 配置超长时间的本地缓存 —— 节省带宽,提高性能 采用内容摘要作为缓存更新依据 —— 精确的缓存控制 静态资源CDN部署 —— 优化网络请求 更资源发布路径实现非覆盖式发布 —— 平滑升级 全文链接:http://www.zhihu.com/question/20790576:

变态的静态资源缓存与更新

这是一个非常有趣的 非主流前端领域,这个领域要探索的是如何用工程手段解决前端开发和部署优化的综合问题,入行到现在一直在学习和实践中. 在我的印象中,facebook是这个领域的鼻祖,有兴趣.有梯子的同学可以去看看facebook的页面源代码,体会一下什么叫工程化. 接下来,我想从原理展开讲述,多图,较长,希望能有耐心看完. 让我们返璞归真,从原始的前端开发讲起.上图是一个"可爱"的index.html页面和它的样式文件a.css,用文本编辑器写代码,无需编译,本地预览,确认OK,丢到服

.htaccess设置静态资源缓存(即浏览器缓存)

在HTTP标头中为静态资源设置过期日期或最长存在时间,可指示浏览器从本地磁盘中加载以前下载的资源,而不是通过网络加载.这样, 网站加载速度会更快. 下面的代码都需要放到.htaccess中才能生效. 推荐设置过期时间为一个月, 即: max-age=2592000. 通过FilesMatch设置 <FilesMatch ".(flv|gif|jpg|jpeg|png|ico|swf|css|js)$">Header set Cache-Control "max-a

清除nginx静态资源缓存

之前写过一篇如何配置nginx缓存及手动清除缓存的文章: http://www.cnblogs.com/Eivll0m/p/4921829.html 但如果有大量缓存需要清理,手动一条条清理就比较慢了,所以写了个小脚本进行清理,脚本如下: #!/usr/bin/env python # -*- coding: UTF-8 -*- # data:2015-12-08 # author:eivll0m # 脚本用途:清除nginx静态资源缓存 # 使用方法:将要清楚缓存的url粘贴到/app/adm

Nginx配置静态资源缓存时间及实现防盗链

环境源主机:192.168.10.158系统:centos 7.4域名:www.wuxier.cn盗链主机:192.168.10.191(使用Nginx+Tomcat实现负载均衡.动静分离的实验主机,点我进行复盘)系统:centos 7.4域名:www.ajie.com 和 www.taobao.com 创建软件包存放目录 [[email protected] ~]# mkdir /root/software [[email protected] ~]# cd /root/software/ [

http升级为https后,静态资源失效和ajax请求跨域问题

把http升级以后,一打开原本的网站,会发现很多静态资源失效了. 只需要在html页面加入: <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"> 2:ajax请求与显示跨域 当发送ajax请求时报错: XMLHttpRequest cannot load [ajax请求的服务器url] No 'Access-Control-Allow-Origin

LAMP+haproxy+varnish实现网站访问的动静分离及静态资源缓存

实验目标:1.    LAMP节点提供用户动态请求访问,数据库单独有数据库节点提供:2.    LAMP动态网站有两台服务器,提供负载均衡:3.    静态网站服务器节点提供用户的静态资源请求访问:存在两台静态web服务器,其网站静态资源在静态服务器上存放:4.    用户的静态请求访问后缓存在varnish服务器上,实现访问加速5.    前端的haproxy提供反向代理功能,将用户的动态资源请求发送给后端LAMP节点,静态资源请求发往后端静态web服务器:6.    该架构考虑还不健全,如静

HappyAA服务器部署笔记2(nginx的静态资源缓存配置)

我近期对服务器进行了少量改进,虽然之前使用了nginx反向代理之后性能有所提高,但仍然不够,需要使用缓存来大幅度提高静态资源的访问速度. 服务器上的静态资源主要有这些:png, jpg, svg, js, css等.下面,我通过新的nginx配置来实现缓存.对红色的字我会额外进行说明. worker_processes 1; events { worker_connections 1024; multi_accept on; use epoll; } http { include mime.ty

gulp管理静态资源缓存

前端项目在版本迭代的时候,难免会遇到静态缓存的问题,明明开发的是ok的,但是一部署到服务器上,发现页面变得乱七八糟,这是由于静态缓存引起的. 从上面这张图片可以看出,浏览器加载css,js等资源时,size一栏是from cache,也就是直接使用了本地的资源,而没有向服务器请求.这样做的好处是提升页面渲染速度,坏处是当服务器的对应的文件发生变化时,浏览器却还是使用缓存,造成布局混乱的问题. 解决办法 一个比较原始的办法是在修改了文件之后,手动改变文件名称,然后再在html手动更新资源的path