模塊化開發簡述
什么是模塊化：指文件的組織、管理、使用的方式。即把一個大的文件拆分成幾個小的文件，他們之間相互引用、依賴。
都說模塊化開發為前端發展帶來了巨大的進步，然而不熟悉的人看着也是兩眼一懵，那其實這到底是什么？好處在哪？我來說說自己的見解吧。
1. 模塊化和傳統開發的區別
實話講，其實在我看來，兩者的開發是一樣的，除了方式不一樣，達到的效果並沒兩樣。
看着扯淡，但實際可以想一下，現流行的模塊化開發主要有兩種方式：
依賴加載。這種方式是最廣泛的，像requirejs，sea.js等，除了 編寫規范 不一樣，實際都是通過相關require api把模塊chunk文件拿回來，當加載完成之后再運行邏輯代碼。
依賴打包。經典代表就是webpack，其實就是寫代碼的時候分開模塊，但打包的時候按依賴關系找到各個模塊，最后打包到同一個文件上，並給每個chunk標識id，運行邏輯代碼時將模塊引用指向該id，從而實現模塊化。
而傳統的開發方式是在頁面上通過腳本標簽引入，等所有腳本資源加載完成后再運行邏輯代碼。這樣一對比，是不是發現效果其實是一樣的，我把不同腳本分開寫，也是可以做到類似模塊化的效果？
那么重點來了，模塊化的優勢在哪？
別急着回答，先思考一下，然后帶着你的想法繼續看下去。
先回想一下，傳統開發的痛點在哪。
首先，如上所述，傳統的開發方式需要等待所有腳本資源加載完成。這個問題最大的弊端就是頁面要等待，因為資源加載是同步的。你的頁面會出現短暫的空白期，引入的腳本越多，時間越長，如果某一腳本加載失敗，也可能直接掛掉。
模塊化的代碼則可以很好的處理這個問題。除了模塊化支持的腳本必須加載進來以外，其他腳本都可以異步請求，不需要頁面等待，可以加速渲染出頁面。requirejs，sea.js等也會做好加載重試和模塊緩存的處理，確保所有模塊運行良好。
所有資源加載的時間不會因為模塊化而加速，但是模塊化能加速渲染，這是優勢1。
當然webpack是特例，它和nodejs一樣用 commonjs 規范，為了達到目的，全部腳本打包到一起再運行，看着和上面觀點相悖，不過現在帶寬足夠，相對而言還是足夠快的，也能減少多腳本加載出錯的風險。
接着上面的觀點講，拋開帶寬速度來講，既然網速夠快，那模塊化還有什么？不妨回想一下，傳統開發時最煩的是什么？無非3點
命名空間。早期為了避免命名沖突，大眾做法是用一個變量作為命名空間做隔離，長期開發過程中沒人能記住這個變量是否沖突，它的命名規范是什么，治標不治本。
而模塊化的出現消除了這點。一個模塊內的命名隨自己起，和外界不會沖突，對外的永遠是你exports出來的內容。如果模塊內出現命名沖突，這說明了你的命名水平太低…..
好吧，是模塊顆粒不夠小，還可以繼續分割出模塊~
代碼重用。其實這點和傳統開發並無兩樣，都是把可復用代碼抽取出function（再通用點會抽象出類，也就是構造函數），獨立文件。但模塊化的好處同樣可以規避命名空間的問題，不必設置變量污染到全局。一般模塊化都有緩存機制，在二次調用時無需再解析，直接獲取到緩存模塊內容。
按傳統開發來處理，忽略以上問題，但也耐不住文件太多，引入和管理麻煩。除了amd規范需要依賴前置，我們還可以用cmd規范來寫模塊依賴，想用什么require什么，不用再一個個引入js，看着也舒服。而且現在的模塊化工具基本都實現了多規范混搭，想怎么寫就怎么寫，只要注意組內規范就行。
此外就是 管理問題。
小公司或個人開發，模塊化能讓自己思路更為清晰，降低代碼耦合，優秀的模塊能帶來代碼質量質的飛躍，標准的模塊應該是 “分工明細，職責單一，不牽扯需求邏輯” ，它就應該是個萬能的螺絲，不需要可以修改，哪里需要用哪里。
而中型企業和大團隊則很經常會遇到團隊協作開發，除了會用svn/git等工具管理，各種需求有不同的人負責處理。模塊化對團隊開發會起到協同作用，公共模塊除了避免重復造輪子的痛苦外，也避免了邏輯混淆。
原文：https://blog.csdn.net/rongliang_chen/article/details/81664254
版權聲明：本文為博主原創文章，轉載請附上博文鏈接！