前端js,css文件合並三種方式,bat命令
前端js文件該如何合並三個方式如下:
1. 一個大文件,所有js合並成一個大文件,所有頁面都引用它。
2. 各個頁面大文件,各自頁面合並生成自己所需js的大文件。
3. 合並多個共用大文件,根據實踐情況合並出多個共用js文件,每個頁面引用多個共用大文件。
合並兩個目的:
1. 為了減少請求數。
2. 代碼安全考慮(文件分得越多,越容易被人看清)。
PS:不是壓縮混淆,只是合並
windows 系統下的 cmd 里的 copy 命令,它雖然是個復制的功能,但實則也是可以實現合並文件的需求,下面就看下這句代碼:
copy a.js+b.js+c.js abc.js /b
通過 copy 命令將 a.js b.js c.js 合並為一個 abc.js,最后的 /b 表示文件為二進位文件,copy 命令的其它參數可以在 cmd 里輸入 copy /? 學習。
windows 本身就可以完成我們的需求,也不用安裝什么其它工具了,下面我們要做的就是將這一切操作更簡單。
在項目存放 JS 的文件夾下新建一個txt文件,將代碼復制進去,並修改需要合並哪些文件,最后保存並將tex修改為 bat 后綴,\
如:
del common-all.js
copy jquery-2.1.4.min.js+bootstrap.min.js+common.min.js common-all.js /b
合並前把之前的先刪了才能更新
保存為mergejs.bat,雙擊bat文件,就會生成一個新的common-all.js文件,這就是我們想要的。
以后每次上線前,只需雙擊下這個文件,系統就會自動合並生成,比起其它什么工具,這個的效率簡直無法直視。
同理,css文件也一樣處理。
-----------------------------------
COPY [/D] [/V] [/N] [/Y | /-Y] [/Z] [/L] [/A | /B ] source [/A | /B]
[+ source [/A | /B] [+ ...]] [destination [/A | /B]]
source 指定要復制的文件。
/A 表示一個 ASCII 文本文件。
/B 表示一個二進位文件。
/D 允許解密要創建的目標文件
destination 為新文件指定目錄和/或文件名。
/V 驗證新文件寫入是否正確。
/N 復制帶有非 8dot3 名稱的文件時,
盡可能使用短文件名。
/Y 不使用確認是否要覆蓋現有目標文件
的提示。
/-Y 使用確認是否要覆蓋現有目標文件
的提示。
/Z 用可重新啟動模式復制已聯網的文件。
/L 如果源是符號鏈接,請將鏈接復制
到目標而不是源鏈接指向的實際文件。
命令行開關 /Y 可以在 COPYCMD 環境變量中預先設定。
這可能會被命令行上的 /-Y 替代。除非 COPY
=======================================
1. 一個大文件
所有js合並成一個大文件,所有頁面都引用它,即使某些代碼可能不會用到。
優點:
(1). 合並簡單,使用也簡單。
(2). 其他頁面可利用緩存優化加載。
缺點:
(1). 頁面可能會加載到本頁面不使用的代碼。
不適用場景:
(1). 這種方式肯定不適用於大型的Web應用,且不論單文件代碼量,業務的復雜性也不允許我們這樣干(我沒見過那個網站這樣做的)。
適用場景:
(1). Hybrid應用,無論是Mobile的Hybrid應用,還是PC的Hybrid應用(桌面應用,類似有道團隊開發框架hex+chromium +nodejs),都非常適合,本身就不會有請求速度問題,這種位於客戶端代碼的應用的代碼安全更為重要。
PS:最重要的還是后端的安全,無論前端是否被破解,后端是否完善輸入校驗,是否防止越權,后端才是關鍵,也就是常說一句話“不要相信用戶的任何輸入”。
2. 各個頁面大文件
各個頁面合並生成自己所需js的大文件,生成多份js合並。
優點:
(1). 每個頁面都用到最精確的js,不會有不相關代碼。
缺點:
(1). 有多少個頁面,就會生成多個js,導致存在大量共同js代碼的冗余。
(2). 共用部分無法使用緩存優化加載。
(3). 合並和使用會相對比較復雜。
小應用直接單個大文件搞定,而大應用更不會這樣去做,更不能用在Hybrid應用上,在這樣講究安裝包大小的情形下,不能容忍冗余代碼。我在思考各種場景時候,都發現能用上面或下面方式解決,而且是更優。
3. 合並多個共用大文件
根據實踐情況合並多個共用大文件(例如依賴庫分類),再合並本頁面所需js文件(例如以業務分類),每個頁面引用一個或多個共用大文件和本頁面的js文件。
優點:
(1). 共用部分得到加載優化,每個頁面引用的也盡可能的做到了不冗余。
缺點:
(1). 多多少少還是會存在某些頁面會引用到不需要的代碼,共用不並不是完完全全的共用。
適用場景:
(1). 大小型應用都比較適用,每個頁面可能存在許多共用部分,合理的分文件合並將非常關鍵。
總結
文件合並方法挺多,由后端動態生成或工具直接生成(grunt+requirejs),合並的方式也就以上三種,也取決於我們實踐需要。
合並很重要,但不是提倡所有文件都合並起來,有不能合並的,有些單獨文件更優的,還是要看具體場景。