0411 - 87569782

老版金鬼将军:推薦3種CSS,JS合并的方式

常見問題 2018-01-08 //www.hoogt.icu/2018/0108/371.html

正版综合资料 www.hoogt.icu 在Web項目的開發中,js,css文件會隨著項目的開發變得越來越多,越來越大,這就給給性能方面帶來一些問題,如,頁面引入的的js,css越多的話,那么對就增加了http請求數,解決該問題的一個好的方法就是合并js,css文件. 下面做網站小編就簡單介紹一個方法,十分簡單.

下面介紹以合并js文件為例 保留疑問 : JS 合并與 JS 壓縮的區別 ? 分別對頁面有什么影響?

(1) G.js 文件,代碼如下:

~function(){ window.G={}; G.Method={ add:function(){ alert(111);} ,sub:function(){ alert("減法");} }; }();

(2) T.js 文件, 代碼如下:

var T=(function(){ return { t1:function(){alert("t1 method!")} ,t2:function(){alert("t2方法!")} ,sum:function(obj){return obj.x+obj.y;} }; }());

上面列出了連個簡單的js文件,下面就要寫一個批處理文件來合并以上文件了

(3) 合并 js,css 文件的批處理方法 , 文件名假設命名為 debug.bat 復制代碼 代碼如下:

copy G.js+T.js GT_bin.js /b

說明 :

(1) 輸入要合并的js文件,保存debug.bat文件,運行debug.bat即可.

(2) 就這么一行代碼就搞定了,十分簡單,GT_bin.js 為合并之后的文件名稱 , /b是固定參數,文件合并之后,頁面就只引用GT_bin.js就可以了,從而減少了js文件的引用,到達了減少http請求的次數,提高了網站的性能.

(3) 合并css文件方法也是如此. 下面是合并的集中方式 : 源文檔 最近在思考前端js文件該如何合并,當然不包括不能合并文件,而是我們能合并的文件,想了想應該也只有三種方式。

三個方式如下:

1、 一個大文件,所有js合并成一個大文件,所有頁面都引用它。

2、各個頁面大文件,各自頁面合并生成自己所需js的大文件。

3、 合并多個共用大文件,根據實踐情況合并出多個共用js文件,每個頁面引用多個共用大文件。

另外在我看來,合并有兩個目的:

1.、為了減少請求數。

2、 代碼安全考慮(文件分得越多,越容易被人看清)。

PS:注意我說的不是壓縮混淆,只是合并

1、 一個大文件 這種方式就是不管三七二十一,所有js合并成一個大文件,所有頁面都引用它,即使某些代碼可能不會用到。

優點:

# 合并簡單,使用也簡單。

# 其他頁面可利用緩存優化加載。

缺點:

# 頁面可能會加載到本頁面不使用的代碼。

不適用場景:

#  這種方式肯定不適用于大型的Web應用,且不論單文件代碼量,業務的復雜性也不允許我們這樣干(我沒見過那個網站這樣做的)。

適用場景:

# Hybrid應用,無論是Mobile的Hybrid應用,還是PC的Hybrid應用(桌面應用,類似有道團隊開發框架hex+chromium +nodejs),都非常適合,本身就不會有請求速度問題,這種位于客戶端代碼的應用的代碼安全更為重要。

PS:當然最重要的還是后端的安全,無論前端是否被破解,后端是否完善輸入校驗,是否防止越權,后端才是關鍵,也就是常說一句話“不要相信用戶的任何輸入”。

2、 各個頁面大文件 各個頁面合并生成自己所需js的大文件,生成多份js合并。

優點:

# 每個頁面都用到最精確的js,不會有不相關代碼。

缺點:

# 有多少個頁面,就會生成多個js,導致存在大量共同js代碼的冗余。

# 共用部分無法使用緩存優化加載。

# 合并和使用會相對比較復雜。

這種方式我始終覺得不對勁,小應用直接單個大文件搞定,而大應用更不會這樣去做,更不能用在Hybrid應用上,在這樣講究安裝包大小的情形下,不能容忍冗余代碼。我在思考各種場景時候,都發現能用上面或下面方式解決,而且是更優,所以我覺得這種方式是個雞肋。

3、合并多個共用大文件 根據實踐情況合并多個共用大文件(例如依賴庫分類),再合并本頁面所需js文件(例如以業務分類),每個頁面引用一個或多個共用大文件和本頁面的js文件。

優點:

# 共用部分得到加載優化,每個頁面引用的也盡可能的做到了不冗余。

缺點:

# 多多少少還是會存在某些頁面會引用到不需要的代碼,共用不并不是完完全全的共用。

適用場景:

大小型應用都比較適用,每個頁面可能存在許多共用部分,合理的分文件合并將非常關鍵。 總結 這一篇文件只是思考,也只算泛泛之談。

總結:

文件合并方法挺多,由后端動態生成或工具直接生成(grunt+requirejs),合并的方式也就以上三種,也取決于我們實踐需要。 合并很重要,但不是提倡所有文件都合并起來,有不能合并的,有些單獨文件更優的,還是要看具體場景。

上一條 返回目錄 下一條
正版综合资料
新时时彩开奖将结果 炸金花手机版赢现金 球琛比分足球即时比分 二十一点基本策略表 重庆时时最新开奖结果 七乐彩开奖号码 一分钟赛车计划软件 麻将技巧视频 体育直播 11选5前2直选技巧 一分彩免费计划软件哪个好 电子游艺pt平台 pk10智能计划苹果版 买彩票稳赚不赔绝技 七乐彩缩水专家免费版 北京单场投注技巧