Nodejs基于Express4的动态页面静态化

上个星期在慕课网上提了个问:开发的动态页面访问好慢的说? 不幸的是并没有得到可行的回答 , 周末自己折腾了一番 , 一并将小站(花满楼) 的几个页面全部静态化了;事后想了想 , 虽不是什么特别标准好的搞法 , 但纠结这么久了 , 这个问题终于有办法了 , 还是有些欣慰的;
一开始页面都是动态的 , 由jade模板出来的 , 可不明白为什么不论页面内容多少 , 打开都至少要一秒多 。。。
;后来专门弄个站点作为静态资源站 , 缓存加gzip(打造静态资源服务器与文件上传 );OK , 静态资源现在没啥大问题了;可是页面打开速度并不理想 , 那后台再压一遍吧 , 来个app.use(());事实证明并没啥明显效果;郁闷的我刚学点 , 咋就碰到这无语的问题呢 , 百度好久 , 呵呵 。。。最后只想到一个办法了 , 参照静态资源站的搞法 , 将jade编译成html , 把动态页面转成静态资源来对待 , 会不会像加载静态资源一样快呢!答案是肯定的!!!
就我的博客站点来说 , 现在面临两个问题:一是直接将原来的jade编译 , 保留动态数据;二是现将动态数据剔除 , 再编译为html , 由ajax页面加载后请求数据;我选择了前者 , 因为这样能在静态页面上保留最新的数据 , 而后者由js后面渲染上去的对SEO很不好;呵呵 , 而实际上这两种方法我都没用 , 因为就这点水平来说 , 在的框架里 , 并没听说这种搞法 , 我自然就无从下手了 , 只是理想上的可行方案;
那咋办呢?好吧 , 原谅我选择了放弃内置的模板 , 稍作整理后 , Gulp(gulp-jade模块)直接将那些jade全编译为html(前端自动化之神器 — Gulp ) , 我是这样想的 , 将这些编译后的html做为一种类似模板的模块 , 在里还是原来那样拿数据 , 将拿到的数据作为变量传递到html类模板那个模块对应的接口 , 然后将返回的html生成一个真正的静态页面 , 这样 , 原来的jade , 在不变的情况下 , 直接生成到对应目录了;上面说过要像加载静态资源一样加载页面 , 才可能够快;
.js

Nodejs基于Express4的动态页面静态化

文章插图
1 var jade=require('gulp-jade');2 3 gulp.task('jade',function() {4gulp.src('./views/bokeDetail.jade')5.pipe(jade({pretty:true}))6.pipe(gulp.dest('./public/famanoder/')); 7 });
.templ.js
1 var html=function(id,title,subtitle,time,from,contents){2//传递动态数据3return ''+动态数据+'';4 }5 //片段 , 实际情况而定
.js()
1 //......2 //引入对应静态模块3 var boketempl=require('./templs/bokeDetail.templ.js);4 5 //依旧读取数据6 //传递数据:如 , id , title , content , comments7 //生成静态页面到指定目录8 function createStaticPage(id , title , content , comments , fn){9var path='./public/famanoder/';10var html=boketempl(id , title , content , comments);11var ws=fs.createWriteStream(path+id+'.html');12ws.write(html,function(err) {13console.log('writePage:'+path+id+'.html');14fn&&fn();15});16ws.on('drain',function() {17ws.end();18});19 }