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

資訊專欄INFORMATION COLUMN

Vue按需加載

caspar / 653人閱讀

摘要：按需加載實(shí)現(xiàn)定義路由，每個(gè)路由映射一個(gè)組件。第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊，例如，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部使用這些模塊。

概念（懶加載）

當(dāng)打包構(gòu)建應(yīng)用時(shí)，JavaScript包會(huì)變得非常大，影響頁面加載。如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時(shí)候才加載對應(yīng)組件，嗯，這樣就更加高效了。

場景

xxx項(xiàng)目作為一個(gè)單頁面應(yīng)用，采用組件化的開發(fā)模式，每次啟動(dòng)首頁都會(huì)加載全部組件，但此時(shí)只是訪問了首頁而已，就造成了大量組件污染加載的情況。

目的

只在訪問當(dāng)前頁面時(shí)加載對應(yīng)組件，避免頁面組件全部加載。（按需加載）

實(shí)現(xiàn)

app.vue

router.js

import Vue from "vue"
import VueRouter from "vue-router"
import "babel-polyfill"
import {Promise} from "es6-promise-polyfill"
import App from "../components/app"

// 定義路由，每個(gè)路由映射一個(gè)組件。
const Routers = [
    {
        path: "/",   // 路徑
        component: resolve => require(["../components/member/index], resolve)   // 異步加載組件
    },
    {
        path: "/login",
        component: resolve => require(["../components/member/login"], resolve)
    }
]

const RouterConfig = {
    routes: Routers
}
// 創(chuàng)建router實(shí)例，并傳遞路由配置。
const router = new VueRouter(RouterConfig);
// 創(chuàng)建并掛載根實(shí)例。
new Vue({
    el:"#app",
    router,
    // 將h作為createElement的別名是一個(gè)通用慣例。
    render: h =>(App)  
})
注意：

require()函數(shù)接受兩個(gè)參數(shù)。第一個(gè)參數(shù)是一個(gè)數(shù)組，表示所依賴的模塊，例如["moduleA","moduleB"]，第二個(gè)參數(shù)是一個(gè)回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會(huì)以參數(shù)形式傳入該函數(shù)，從而在回調(diào)函數(shù)內(nèi)部使用這些模塊。

示例代碼中使用了異步的方式加載組件，其中require函數(shù)負(fù)責(zé)異步引入將要渲染的組件，而resolve則負(fù)責(zé)異步回調(diào)渲染組件。

babel-polyfill：對Promise進(jìn)行轉(zhuǎn)碼編譯；

npm install --save babel-polyfill

es6-promise-polyfill 解決Promise兼容性問題。關(guān)于不太了解Promise的同學(xué)請移步這里 

npm install --save es6-promise-polyfill

如有錯(cuò)誤，還請不吝指正。

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

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

相關(guān)文章

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

    摘要：懶加載也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。路由的懶加載按需加載的寫法效果按需加載會(huì)在頁面第一次請求的時(shí)候，把相關(guān)路由組件塊的添加上非按需加載則會(huì)把所有的路由組件塊的包打在一起。當(dāng)業(yè)務(wù)包很大的時(shí)候建議用路由的按需加載懶加載。 懶加載也叫延遲加載，即在需要的時(shí)候進(jìn)行加載，隨用隨載。在單頁應(yīng)用中，如果沒有應(yīng)用懶加載，運(yùn)用webpack打包后的文件將會(huì)異常的大，造成進(jìn)入首頁時(shí)，需要...

    Lucky_Boy 評(píng)論0 收藏0

  • Vue組件庫開發(fā)總結(jié)

    摘要：組件庫開發(fā)總結(jié)由于工作需要，最近在學(xué)習(xí)怎么開發(fā)一個(gè)組件庫。按需打包的使用要使用按需打包，不僅組件庫的打包需要做處理，項(xiàng)目中也需要做處理。 Vue組件庫開發(fā)總結(jié) 由于工作需要，最近在學(xué)習(xí)怎么開發(fā)一個(gè)Vue組件庫。主要需要實(shí)現(xiàn)以下點(diǎn)：1.組件使用npm包引入2.實(shí)現(xiàn)按需引入及按需打包項(xiàng)目中許多實(shí)現(xiàn)是參考的element-ui，特別是webpack打包部分 組織項(xiàng)目 項(xiàng)目生成 項(xiàng)目生成是直接...

    longshengwang 評(píng)論0 收藏0

  • vue項(xiàng)目實(shí)現(xiàn)按需加載的3種方式：vue異步組件、es提案的import()、webpack的req

    摘要：但是，這種情況下一個(gè)組件生成一個(gè)文件。提供的配置路由，使用的技術(shù)，也可以實(shí)現(xiàn)按需加載。這種情況下，多個(gè)路由指定相同的，會(huì)合并打包成一個(gè)文件。舉例如下詳細(xì)代碼在倉庫項(xiàng)目路由配置文件 1. vue異步組件技術(shù) vue-router配置路由，使用vue的異步組件技術(shù)，可以實(shí)現(xiàn)按需加載。 但是，這種情況下一個(gè)組件生成一個(gè)js文件。舉例如下： { path...

    X_AirDu 評(píng)論0 收藏0

  • 實(shí)現(xiàn)element-ui的按需引入，按需打包加載

    摘要：簡單說明原理使用實(shí)現(xiàn)按需引入打包。這里采用多入口配置，實(shí)現(xiàn)各個(gè)功能模塊分別打包成一個(gè)文件，并使用將樣式進(jìn)行抽離后，按入口進(jìn)行打包為對應(yīng)的文件。只要在指定入口名為。這個(gè)相關(guān)配置已經(jīng)發(fā)布了包。 簡單說明原理： 使用babel-plugin-component實(shí)現(xiàn)按需引入、打包。將webpack配置成多入口，保證最終打包的目錄結(jié)構(gòu)符合babel-plugin-component插件的要求，實(shí)...

    TesterHome 評(píng)論0 收藏0

  • 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 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<