成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue的路由懶加載和組件的按需加載

Lucky_Boy / 3136人閱讀

摘要：懶加載也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。路由的懶加載按需加載的寫法效果按需加載會在頁面第一次請求的時(shí)候，把相關(guān)路由組件塊的添加上非按需加載則會把所有的路由組件塊的包打在一起。當(dāng)業(yè)務(wù)包很大的時(shí)候建議用路由的按需加載懶加載。

“懶加載也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。在單頁應(yīng)用中，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會異常的大，造成進(jìn)入首頁時(shí)，需要加載的內(nèi)容過多，延時(shí)過長，不利于用戶體驗(yàn)，而運(yùn)用懶加載則可以將頁面進(jìn)行劃分，需要的時(shí)候加載頁面，可以有效的分擔(dān)首頁所承擔(dān)的加載壓力，減少首頁加載用時(shí)。”

1、vue路由的懶加載

按需加載的寫法

                require(["src/xx/xxx/xx.vue"], resolve);
            }

效果

按需加載會在頁面第一次請求的時(shí)候，把相關(guān)路由組件塊的js添加上；非按需加載則會把所有的路由組件塊的js包打在一起。當(dāng)業(yè)務(wù)包很大的時(shí)候建議用路由的按需加載（懶加載）。

2、vue組件的異步加載和同步加載

組件的寫法

       // aview: function(resolve) {
       //     require(["./a.vue"], resolve);
       // },
       // bview: function(resolve) {
       //     require(["./b.vue"], resolve);
       // }
       aview:require("./a.vue"),
       bview:require("./b.vue"),

效果
異步組件頁面渲染的時(shí)候會跳動；但是同步書寫不會

3、vue組件的按需加載（2種方式） 1、動態(tài)組件方式

書寫方式

組件里面：
 components: {
        aview: function(resolve) {
            require(["./a.vue"], resolve);
        },
        bview: function(resolve) {
            require(["./b.vue"], resolve);
        }
    },
 模板里面：

 data: function() {
        return {
            current: "",
            myData:"",
            show:false
        }
    },
    methods: {
        changeComponents:function(view)
        {
            if(view=="aview")
            {
                this.myData="a1000";
            }
            else
            {
                this.myData="b1000";
            }
            this.current=view;
        }
    }

*效果（會觸發(fā)組件的生命周期）

2、v-if方式(強(qiáng)制創(chuàng)建和結(jié)束生命周期)

書寫方式

模板：

組件：
components: {
        aview:require("./a.vue")
    },

效果

詳細(xì)的路由懶加載

更需資料github

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/88806.html

相關(guān)文章

  • webpack+vue項(xiàng)目實(shí)戰(zhàn)（三，配置功能操作頁和組件的按需加載）

    摘要：但是實(shí)際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時(shí)候才加載。 1.前言 上篇文章（webpack+vue項(xiàng)目實(shí)戰(zhàn)（二，開發(fā)管理系統(tǒng)主頁面）），實(shí)現(xiàn)了，側(cè)邊欄的一個(gè)操作，點(diǎn)擊側(cè)邊欄的一些操作，最重要的就是路由的切換?？戳松弦黄幕锇橐膊浑y發(fā)現(xiàn)，除了點(diǎn)擊側(cè)邊欄‘首頁’之外，點(diǎn)擊其它的都是白色的一片。原因我想大家都...

    endless_road 評論0 收藏0

  • 關(guān)于vue的懶加載實(shí)踐

    摘要：最近在研究的按需加載，好奇怪，之前好像并沒有看到的官文里面有這一部分，是我看差了嗎尬笑其實(shí)只需要看官文就可以了，里面有懶加載的講解，并且附帶了詳細(xì)內(nèi)容的連接。所以很大程度上優(yōu)化了頁面的初始加載速度。只是為了測試按需加載隨便寫的而已。 最近在研究vue的按需加載，好奇怪，之前好像并沒有看到vue的官文里面有這一部分，是我看差了嗎hahaha~尬笑~ 其實(shí)只需要看vue-router官文就...

    wangzy2019 評論0 收藏0

  • vue2首頁加載慢的問題

    摘要：開發(fā)完了，并部署到服務(wù)器后，就遇到了一個(gè)非常明顯的問題。所以可以利用按需加載來進(jìn)一步縮小文件的體積。另外圖片還可以去下面這個(gè)網(wǎng)上壓縮一下經(jīng)過上述的幾步，首頁的加載速度已經(jīng)比較快了，項(xiàng)目經(jīng)理也比較滿意。初步結(jié)束了首頁加載慢的問題的研究。 本次開發(fā)的項(xiàng)目中使用了vue2.5.2和自帶的vue-cli生成了前端的基本架構(gòu)。隨后在項(xiàng)目開發(fā)當(dāng)中，添加了自己寫的UI組件，和復(fù)雜的業(yè)務(wù)邏輯。整個(gè)項(xiàng)目...

    canopus4u 評論0 收藏0

  • 使用Webpack的代碼分離實(shí)現(xiàn)Vue懶加載（譯文）

    摘要：當(dāng)一個(gè)的項(xiàng)目體積變得十分龐大的時(shí)候，使用的代碼分離功能將，或的代碼進(jìn)行分離并按需加載，會極大的提高的首屏加載速度。如果我們使用函數(shù)在中返回模塊作為載荷，就實(shí)現(xiàn)了懶加載。 當(dāng)一個(gè)Vue的項(xiàng)目體積變得十分龐大的時(shí)候，使用Webpack的代碼分離功能將Vue Components，routes或Vuex的代碼進(jìn)行分離并按需加載，會極大的提高App的首屏加載速度。 showImg(https:...

    SmallBoyO 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<