Vue按需加載

caspar 發布于2019-08-21 17:52 / 648人閱讀

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

概念（懶加載）

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

場景

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

目的

只在訪問當前頁面時加載對應組件，避免頁面組件全部加載。（按需加載）

實現

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

注意：

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

示例代碼中使用了異步的方式加載組件，其中require函數負責異步引入將要渲染的組件，而resolve則負責異步回調渲染組件。

babel-polyfill：對Promise進行轉碼編譯；

npm install --save babel-polyfill

es6-promise-polyfill 解決Promise兼容性問題。關于不太了解Promise的同學請移步這里

npm install --save es6-promise-polyfill

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

云服務器 GPU云服務器按需加載按需加載javascript webpack按需加載 Vue_Vue

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90128.html

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

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

Lucky_Boy 2019-08-21 16:50 評論0 收藏0
Vue組件庫開發總結

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

longshengwang 2019-08-23 18:16 評論0 收藏0
vue項目實現按需加載的3種方式：vue異步組件、es提案的import()、webpack的req

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

X_AirDu 2019-08-21 16:59 評論0 收藏0
實現element-ui的按需引入，按需打包加載

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

TesterHome 2019-08-23 10:41 評論0 收藏0
webpack+vue項目實戰（三，配置功能操作頁和組件的按需加載）

摘要：但是實際上，回款管理和開票管理的組件文件也是加載了。所以下面引用按需加載來處理。是不是小很多了，然后和是按需加載的，就是需要的時候才加載。 1.前言上篇文章（webpack+vue項目實戰（二，開發管理系統主頁面）），實現了，側邊欄的一個操作，點擊側邊欄的一些操作，最重要的就是路由的切換。看了上一篇的伙伴也不難發現，除了點擊側邊欄‘首頁’之外，點擊其它的都是白色的一片。原因我想大家都...

endless_road 2019-08-20 17:46 評論0 收藏0