成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

Vue按需加載

caspar / 699人閱讀

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

概念（懶加載）

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

場景

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

目的

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

實現(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"

// 定義路由，每個路由映射一個組件。
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實例，并傳遞路由配置。
const router = new VueRouter(RouterConfig);
// 創(chuàng)建并掛載根實例。
new Vue({
    el:"#app",
    router,
    // 將h作為createElement的別名是一個通用慣例。
    render: h =>(App)  
})
注意：

require()函數(shù)接受兩個參數(shù)。第一個參數(shù)是一個數(shù)組，表示所依賴的模塊，例如["moduleA","moduleB"]，第二個參數(shù)是一個回調(diào)函數(shù)，當(dāng)前面指定的模塊都加載成功后，它將被調(diào)用。加載的模塊會以參數(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

如有錯誤，還請不吝指正。

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

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

相關(guān)文章

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

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

    Lucky_Boy 評論0 收藏0

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

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

    longshengwang 評論0 收藏0

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

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

    X_AirDu 評論0 收藏0

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

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

    TesterHome 評論0 收藏0

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

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

    endless_road 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<