組件化就是做一個網站，把導航欄拆成一個組件，一個一個回答區域拆成一個組件，編輯區是一個組件，頁腳是一個組件，等等。。你可以盡情拆分。一個組件包含了html、css、js代碼，可以簡單理解為頁面的一塊。組件化更多關注的UI部分，頁面的每個部件，比如頭部，內容區，彈出框甚至確認按鈕都可以成為一個組件，每個組件有獨立的HTML、css、js代碼。可以根據需要把它放在頁面的任意部位，也可以和其他組件一起形成新的組件。一個頁面是各個組件的結合，可以根據需要進行組裝。
頁面上的每個獨立的、可視/可交互區域視為一個組件；
每個組件對應一個工程目錄，組件所需的各種資源都在這個目錄下就近維護；
由於組件具有獨立性，因此組件與組件之間可以 自由組合；
頁面只不過是組件的容器，負責組合組件形成功能完整的界面；
當不需要某個組件，或者想要替換組件時，可以整個目錄刪除/替換。
組件化將頁面視為一個容器，頁面上各個獨立部分例如：頭部、導航、焦點圖、側邊欄、底部等視為獨立組件，不同的頁面根據內容的需要，去盛放相關組件即可組成完整的頁面。
模塊化就是做一個網站的編輯區組件，假設要有時間格式化、圖片格式處理、視頻格式處理、代碼格式處理，這樣很多個js功能。那么你當然可以在HTML里面引入多個JS script，現在更流行更好的方式，是采用引入的方式。模塊化側重的功能的封裝，主要是針對Javascript代碼，隔離、組織復制的javascript代碼，將它封裝成一個個具有特定功能的的模塊。模塊可以通過傳遞參數的不同修改這個功能的的相關配置，每個模塊都是一個單獨的作用域，根據需要調用。一個模塊的實現可以依賴其它模塊。
好處：
提高網頁開發效率，提高代碼復用率，降低塊與塊之間的耦合性，能夠在不影響其他代碼的情況下按需修改某一獨立的模塊或是組件