模塊化一小步，編譯的一大步

前言：當 webpack 編譯性能優化作到極限的時候，咱們應該跳出webpack編譯優化的陷阱。由於編譯原本就存在瓶頸。

（拿我司vue項目來講）：
            當項目中的vue文件，從1到1000的時候，甚至還在一每天增多，如何維護好他們確實是一門學問，由於隨之而來的編譯速度，時時刻刻不在浪費咱們團隊中每一個人的生命。

            項目啓動 和 hotReload 編譯 速度：

                 項目啓動速度須要 ：50秒 左右 

                 hotReload 編譯速度須要： 15秒 左右 

 

你還敢相信webpack能幫你解決編譯性能的問題嗎？致命的問題是它沒辦法幫你解決掉文件的數量，因此webpack編譯自己已經成爲了瓶頸。

 

因此我想到了一個解決方案：模塊化 （這裏模塊化概念是指：按照後臺菜單模塊來拆分，把（頁面vue文件 和 路由router.js）維護在一塊兒）

           其實模塊化，能夠按照其它（業務、功能）等維度來劃分。

         

             

選擇模塊化理由： 一個大項目原本就是由多我的同時開發維護，開發人員各自只需關心本身模塊下寫的頁面代碼。(舉個栗子：把 a - w 字母看成模塊化的概念，若是我此次開發涉及到 a、b 2個模塊，其實  c-w 模塊壓根是你不須要關心的模塊），咱們其實能夠按需編譯。 我猜測了一下若是按照模塊化的思路，若是隻針對本次修改的模塊進行編譯，是否是編譯的瓶頸就解決了，順着這個思路，我實踐了模塊化的按需編譯，實踐證實是沒問題的

 

模塊化方案，如圖所示：

 

別看模塊化一小步，編譯性能一大步 ：

最終，項目啓動速度由：50秒  ->  9秒

 最終，hotReload編譯速度由：15秒  -> 1秒