在 Vue2 中，異步組件和路由懶加載處理使用 import 就可以很輕松實(shí)現(xiàn)但是在 Vue 3x 中異步組件的使用與 Vue 2x 完全不同了本文就詳細(xì)講講 vue3 中 異步組件 和 路由懶加載 的實(shí)現(xiàn)所以，下面的異。

以上是常規(guī)引入頁面得部分 下面來看下使用路由懶加載的寫法 看一下打包之后的效果，會看到打包出了多個(gè)chunk異步塊同樣可以使用特殊注釋語法。

keepalive用來緩存組件，避免了每次點(diǎn)擊其他頁面都要加載，減少性能消耗和提高用戶體驗(yàn)，下圖緩存整個(gè)路由視圖所有頁面，也可以緩存單個(gè)組件 圖片懶加載用了 vuelazyload 組件，npm安裝npm i vuelazyload S#160我是。

1懶加載路由使用懶加載路由可以在需要時(shí)異步加載組件并分塊打包，從而避免一次性加載所有組件，優(yōu)化頁面加載速度2合理劃分路由根據(jù)業(yè)務(wù)需求合理劃分路由，避免無限制的添加子路由，尤其是對于大型項(xiàng)目而言3緩存組件。

vue由靜態(tài)路由改為動態(tài)路由時(shí)，出現(xiàn)下面的錯(cuò)誤 靜態(tài)路由懶加載，當(dāng)我們把router寫死import里面它是正常加載的，可是我們通過api接口拉取過來的數(shù)據(jù)時(shí)，發(fā)現(xiàn)是不報(bào)了上面的錯(cuò)export const importPath = comUrl =。

使用vue create #39文件名#39，創(chuàng)建一個(gè)vue腳手架，vueuseVueRouter，調(diào)用vuerouter這個(gè)對象上面的install方法，注冊兩個(gè)屬性在vue原型對象上，分別是vueprototype$router整個(gè)項(xiàng)目的路由對象和vueprototype$route當(dāng)前。

1 什么是vue的計(jì)算屬性computed 計(jì)算屬性是需要復(fù)雜的邏輯，可以用方法method代替 2vuecli提供的幾種腳手架模板 vuecli 的腳手架項(xiàng)目模板有browserify 和 webpack3組件中傳遞數(shù)據(jù)4 vuerouter實(shí)現(xiàn)路由懶加載。

報(bào)錯(cuò)原因 很有可能是你在路由懶加載的時(shí)候，在import里使用了動態(tài)路徑比如， component = import* webpackChunkName quothomequot * PATH + #39Indexvue#39 ，這樣的路徑是不起作用的，具體原因可以查看。

* 懶加載功能 一開始不加載，當(dāng)你切換路由的時(shí)候再加載 * component = import* webpackChunkName quotaboutquot * #39viewsAboutViewvue#39， * about不是根路徑 所以redirect后面要寫全 #39aboutaboutchild#39。

是因?yàn)槌绦蜃陨淼腂ug導(dǎo)致頁面加載異常利用路由的懶加載實(shí)現(xiàn)組件的按需加載，這樣配置后只有當(dāng)路由被訪問時(shí)才會加載對應(yīng)的組件，而不是在加載首頁的時(shí)候就直接加載即可恢復(fù)。

所以就想了另外的方法 項(xiàng)目中我主要是針對首屏加載做了優(yōu)化，我覺得只要首屏快速出來了，其它的就慢慢來吧，哈哈 還有其它的一些方向，路由懶加載，外部引入資源，這些都很容易了，就不羅列了。

1打包的時(shí)候不生成map文件打包的時(shí)候生成gzip文件，部署的時(shí)候，讓nginx直接讀取gzip文件2路由加載的時(shí)候采用懶加載模式3首頁較大的圖片適當(dāng)?shù)倪M(jìn)行壓縮即可。

沒有這個(gè)boundry見圖，最后還是用了vueresource中的。

如下圖所示，該二級路由信息中的component信息采用了 路由懶加載 的方式導(dǎo)入 然后在一級路由頁面onevue中寫入二級路由頁面的routerlink導(dǎo)航和routerview 最終效果如下圖所示。

即appjs文件過大導(dǎo)致的如何來處理 vue在webpack打包的過程中，將多余文件。

原本有三個(gè)文件，分割的是這三個(gè)文件里面的name屬性。