Node.js 實戰（一）之—優化彙總

Express 頁面緩存

app.set("cache view",true); --設置頁面緩存

開發模式下博主建議不要這麼作，由於開發中咱們會頻繁的對頁面的樣式、js等進行修改，若是開啓了頁面緩存咱們須要強制刷新頁面才能正常調試，會很麻煩。

compression 模塊內容動態壓縮

npm install -save compression # 添加compression 模塊

var compression=require("compression"); //引入
app.use(compression()); --注入到express

頁面僞靜態化

網站上線已經一個多月了，發現被百度收錄的頁面沒幾個，天天的訪問量也是趨於零。說啥本身的文章也都是原創啊，也作了連接提交， 可是不收錄，一點面子都不給，難受想哭！後來仔細想一想分析緣由應該是頁面URL的問題，因此決定對文章詳情頁作僞靜態。僞靜態的實現比較簡單只是對URL進行了正則匹配處理，下面是主要實現代碼：

/* 文章詳細信息頁面路由*/
route.get(/^\/detail\/([a-zA-Z0-9]{10,})\.html/,function(req,res,next){
   var article_id=req.params[0];//文章id
   
})

Gulp自動化構建

Gulp作爲一個流自動化構建工具，能夠幫助咱們壓縮css、js，編譯less，合併多個css文件等。Gulp的概述和使用詳解不在本文進行過多介紹，網上關於這方面的文章一搜一大把，本身去補腦。

這裏簡要簡述一下Gulp中task、 src、dest、watch 這4個方法的基本使用：

/* 定義一個任務，咱們使用gulp命令編譯代碼時須要使用這個任務名 ,beforeTasks 故名思議就是須要等待beforeTasks 中定義的任務執行完畢後纔會執行當前任務*/
gulp.task("taskname"[,beforeTasks],function(){


});
/* src方法用於輸出一個和 globs 中定義相匹配的文件流，globs 能夠是一個文件路徑或一個文件路徑數組，這些文件路徑是支持正則表達式的 */
gulp.src(globs[, options]);

/* dest 方法用於將一個流寫入到文件中，path 只支持路徑不能進行文件的重命名*/
gulp.dest(path[, options]);

/* watch 用來監聽文件變化， globs 與src中的globs用法相同 。咱們能夠監聽css或js文件的變化，讓gulp自動去執行咱們寫的壓縮css或編譯less的任務*/
gulp.watch(globs[, options,callback]);

弄懂使用方法之後咱們直接來擼代碼，gulp當然強大，可是全部的事情不可能所有交給它作，咱們須要依賴它的一些插件。

npm install -save-dev gulp-less  // 編譯less
npm install -save-dev gulp-load-plugins //按需加熱加載 gulp 插件
npm install -save-dev gulp-minify-css //壓縮css
npm install -save-dev gulp-rename //對輸出的文件重命名
npm install -save-dev gulp-uglify //壓縮js

gulpfile.js 文件中的主要實現代碼

var gulp=require("gulp");
var plugins = require('gulp-load-plugins')();

gulp.task("default",function () {
    gulp.src("public/css/front/*.less")
        .pipe(plugins.less())
        .pipe(gulp.dest("public/css/front/"))
        .pipe(plugins.minifyCss())
        .pipe(plugins.rename({
            extname: ".min.css"
            }))
        .pipe(gulp.dest("public/css/front/"));

    //壓縮js文件
    gulp.src("public/scripts/admin/*[^(min)].js")
        .pipe(plugins.uglify())
        .pipe(plugins.rename({
            extname: ".min.js"
        }))
        .pipe(gulp.dest("public/scripts/admin/"));

    gulp.src("public/scripts/front/*[^(min)].js")
        .pipe(plugins.uglify())
        .pipe(plugins.rename({
            extname: ".min.js"
        }))
        .pipe(gulp.dest("public/scripts/front/"));

});

最後編譯後的結果

咱們在頁面中引入壓縮後的.min文件就行。

 

本文原文地址：https://www.limitcode.com/detail/59577c1635ce20031080ba90.html