最近在思考前端js檔案該如何合併，當然不包括不能合併檔案，而是我們能合併的檔案，想了想應該也只有三種方式。
三個方式如下：
1. 乙個大檔案，所有js合併成乙個大檔案，所有頁面都引用它。
2. 各個頁面大檔案，各自頁面合併生成自己所需js的大檔案。
3. 合併多個共用大檔案，根據實踐情況合併出多個共用js檔案，每個頁面引用多個共用大檔案。
另外在我看來，合併有兩個目的：
1. 為了減少請求數。
2. **安全考慮（檔案分得越多，越容易被人看清）。
ps：注意我說的不是壓縮混淆，只是合併
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），合併的方式也就以上三種，也取決於我們實踐需要。
合併很重要，但不是提倡所有檔案都合併起來，有不能合併的，有些單獨檔案更優的，還是要看具體場景。
前端js,css檔案合併三種方式,bat命令
前端js,css檔案合併三種方式,bat命令 前端js檔案該如何合併三個方式如下 1.乙個大檔案，所有js合併成乙個大檔案，所有頁面都引用它。2.各個頁面大檔案，各自頁面合併生成自己所需js的大檔案。3.合併多個共用大檔案，根據實踐情況合併出多個共用js檔案，每個頁面引用多個共用大檔案。合併兩個目的...
js或css檔案合併的三種方式推薦
源文件 在web專案的開發中,js,css檔案會隨著專案的開發變得越來越多,越來越大,這就給給效能方面帶來一些問題 解決該問題的乙個好的方法就是合併js,css檔案需要了解的朋友可以參考下 在web專案的開發中,js,css檔案會隨著專案的開發變得越來越多,越來越大,這就給給效能方面帶來一些問題,如...
JS事件繫結三種方式
1.在html標籤中直接繫結 2.在js中獲取到相應的dom元素後繫結 重複繫結會覆蓋之前繫結的onclick事件let button1 document.getelementbyid btn1 button1.onclick function 3.在js中使用addeventlistener 實現...