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

資訊專欄INFORMATION COLUMN

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

X_AirDu / 2803人閱讀

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

1. vue異步組件技術(shù)

vue-router配置路由，使用vue的異步組件技術(shù)，可以實現(xiàn)按需加載。

但是，這種情況下一個組件生成一個js文件。
舉例如下：

        {
            path: "/promisedemo",
            name: "PromiseDemo",
            component: resolve => require(["../components/PromiseDemo"], resolve)
        }
2. es提案的import()

推薦使用這種方式(需要webpack > 2.4)

webpack官方文檔：webpack中使用import()

vue官方文檔：路由懶加載(使用import())

vue-router配置路由，代碼如下：

// 下面2行代碼，沒有指定webpackChunkName，每個組件打包成一個js文件。
const ImportFuncDemo1 = () => import("../components/ImportFuncDemo1")
const ImportFuncDemo2 = () => import("../components/ImportFuncDemo2")
// 下面2行代碼，指定了相同的webpackChunkName，會合并打包成一個js文件。
// const ImportFuncDemo = () => import(/* webpackChunkName: "ImportFuncDemo" */ "../components/ImportFuncDemo")
// const ImportFuncDemo2 = () => import(/* webpackChunkName: "ImportFuncDemo" */ "../components/ImportFuncDemo2")
export default new Router({
    routes: [
        {
            path: "/importfuncdemo1",
            name: "ImportFuncDemo1",
            component: ImportFuncDemo1
        },
        {
            path: "/importfuncdemo2",
            name: "ImportFuncDemo2",
            component: ImportFuncDemo2
        }
    ]
})
3. webpack提供的require.ensure()

vue-router配置路由，使用webpack的require.ensure技術(shù)，也可以實現(xiàn)按需加載。

這種情況下，多個路由指定相同的chunkName，會合并打包成一個js文件。
舉例如下：

        {
            path: "/promisedemo",
            name: "PromiseDemo",
            component: resolve => require.ensure([], () => resolve(require("../components/PromiseDemo")), "demo")
        },
        {
            path: "/hello",
            name: "Hello",
            // component: Hello
            component: resolve => require.ensure([], () => resolve(require("../components/Hello")), "demo")
        }

詳細代碼在github倉庫：https://github.com/cag2050/vu...

項目路由配置文件：https://github.com/cag2050/vu...

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

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

相關(guān)文章

  • webpack 基礎(chǔ)與項目優(yōu)化實踐總結(jié)

    摘要：前言本文基于，主要涉及基本概念基本配置和實際項目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實踐部分基于自己的項目進行優(yōu)化配置。同一文件中，修改某個影響其他。 前言：本文基于weboack4.x，主要涉及webpack4 基本概念、基本配置和實際項目打包優(yōu)化。關(guān)于概念方面參考官網(wǎng)，常用配置來自于網(wǎng)絡(luò)資源，在文末有相關(guān)參考鏈接，實踐部分基于自己的項目進行...

    Scorpion 評論0 收藏0

  • Vue.js 子組件的異步加載及其生命周期控制

    摘要：本文主要對組件化開發(fā)中子組件的異步加載和其生命周期進行一些探討。異步組件討論異步加載，需要先了解下異步組件。生命周期控制在使用子組件或者叫局部注冊時，我們可能需要在子組件實例化或者叫創(chuàng)建完畢后做某些事情。 前端開發(fā)社區(qū)的繁榮，造就了很多優(yōu)秀的基于 MVVM 設(shè)計模式的框架，而組件化開發(fā)思想也越來越深入人心。這其中不得不提到 Vue.js 這個專注于 VM 層的框架。 本文主要對 Vue...

    lidashuang 評論0 收藏0

  • vue開發(fā)看這篇文章就夠了

    摘要：注意此處獲取的數(shù)據(jù)是更新后的數(shù)據(jù)，但是獲取頁面中的元素是更新之前的鉤子函數(shù)說明組件已經(jīng)更新，所以你現(xiàn)在可以執(zhí)行依賴于的操作。鉤子函數(shù)說明實例銷毀 Vue -漸進式JavaScript框架 介紹 vue 中文網(wǎng) vue github Vue.js 是一套構(gòu)建用戶界面(UI)的漸進式JavaScript框架 庫和框架的區(qū)別 我們所說的前端框架與庫的區(qū)別？ Library 庫，本質(zhì)上是一...

    fsmStudy 評論0 收藏0

  • 從0到1搭建webpack2+vue2自定義模板詳細教程

    摘要：安裝安裝完成之后，你應(yīng)該可以使用了，方式如下上述命令應(yīng)該自動在瀏覽器中打開。 前言 webpack2和vue2已經(jīng)不是新鮮東西了，滿大街的文章在講解webpack和vue，但是很多內(nèi)容寫的不是很詳細，對于很多個性化配置還是需要自己過一遍文檔。Vue官方提供了多個vue-templates，基于vue-cli用官方的webpack模板居多，不過對于很多人來說，官方的webpack模板的配...

    cartoon 評論0 收藏0

  • vue開發(fā)項目完全指南

    摘要：有兩種方法，一種是在開發(fā)環(huán)境中設(shè)置通過的，另一種是在服務(wù)器上修改的配置設(shè)置。這樣我們以后使用訪問接口就可以不加了，打包后訪問也不用手動去除統(tǒng)一管理在項目開發(fā)過程中，會涉及到很多接口的處理，當項目足夠大時，就需要統(tǒng)一管理接口。 這篇文章總結(jié)了vue項目的所遇到的問題，包括跨域、用戶認證、接口統(tǒng)一管理、路由配置、兼容性處理，性能優(yōu)化等內(nèi)容。 項目github地址 : 前端 https:...

    leoperfect 評論0 收藏0

發(fā)表評論

0條評論

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