Angular 與 Vue 的對(duì)比分析

　　異步加載模塊

　　在現(xiàn)在WEB開(kāi)發(fā)中，前端的代碼量已經(jīng)變得非常龐大，不可能再像以前那樣，把所有JS全部壓縮成一個(gè)文件，然后一次性全部加載。所以，無(wú)論你用什么樣的前端框架，異步加載模塊都是一個(gè)必備的功能。為了幫助初學(xué)者理解最基本的思路，畫(huà)圖示例如下：

　　以下是代碼塊和路由之間的對(duì)應(yīng)關(guān)系（虛構(gòu)的）：

　　http://localhost:4200/home chunk-0.js（10k）

　　http://localhost:4200/user chunk-1.js（10k）

　　http://localhost:4200/role chunk-2.js（50k）

　　http://localhost:4200/permission chunk-3.js（80k）

　　就算你不是前端開(kāi)發(fā)者，你也能看出來(lái)，這樣好多了對(duì)不對(duì)？你不需要一上來(lái)就把所有js文件（一共150k）全部加載進(jìn)來(lái)，只有當(dāng)用戶(hù)開(kāi)始使用某個(gè)菜單的時(shí)候，才去異步加載。很明顯，這是一個(gè)必備的特性，我們來(lái)看在Vue和Angular里面分別是怎么實(shí)現(xiàn)異步模塊的。

　　我們先來(lái)看Vue里面繁瑣的做法：

　　根據(jù)以上文檔，你首先要寫(xiě)一下你已經(jīng)寫(xiě)好的Vue組件，然后自己再去利用webpack的code splitting特性自己寫(xiě)配置文件。很明顯，當(dāng)你的項(xiàng)目規(guī)模已經(jīng)做得很大的時(shí)候，比如你已經(jīng)寫(xiě)了500個(gè)Vue組件，這時(shí)候你想切一下異步模塊，然后你就開(kāi)始惡心了。首先你要把這500個(gè)組件都改一下，雖然每個(gè)組件改動(dòng)的幅度不大，但是要改的數(shù)量還是挺多的！或者，當(dāng)你發(fā)現(xiàn)某一些組件本來(lái)被打包在chunk-0.js里面的，但是由于業(yè)務(wù)上的修改，你現(xiàn)在必須把它們移動(dòng)到chunk-1.js里面去，那對(duì)不起，請(qǐng)你自己到配置文件里面去慢慢改吧！