欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue按需加載實例詳解

 更新時間:2019年09月06日 15:00:04   作者:極速代碼  
在本篇文章里小編給大家整理的是關(guān)于vue按需加載實例的相關(guān)知識點內(nèi)容,有需要的朋友們可以學(xué)習(xí)參考下。

vue-router配置路由,使用vue的異步組件技術(shù),可以實現(xiàn)按需加載。這種方式下一個組件生成一個js文件

用例:

{
path: '/promisedemo',   name: 'PromiseDemo',   component: resolve => require(['../components/PromiseDemo'], resolve)
}

es提案的import() (推薦)

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

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

用例:

// 下面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     }   ] })

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') }

以上就是本次介紹的全部知識點內(nèi)容,感謝大家的學(xué)習(xí)和對腳本之家的支持。

相關(guān)文章

  • vue3中refs用法舉例小結(jié)

    vue3中refs用法舉例小結(jié)

    這篇文章主要給大家介紹了關(guān)于vue3中refs用法舉例的相關(guān)資料,Vue.js中的$refs是一個對象,它持有已注冊過ref特性的所有組件和元素,需要的朋友可以參考下
    2023-08-08
  • axios異步提交表單數(shù)據(jù)的幾種方法

    axios異步提交表單數(shù)據(jù)的幾種方法

    這篇文章主要給大家介紹了關(guān)于axios異步提交表單數(shù)據(jù)的幾種方法,文中通過示例代碼介紹的非常詳細(xì),對各位大家學(xué)習(xí)或者使用axios具有一定的參考學(xué)習(xí)價值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
    2019-08-08
  • Vue中使用方法、計算屬性或觀察者的方法實例詳解

    Vue中使用方法、計算屬性或觀察者的方法實例詳解

    這篇文章主要介紹了Vue中如何使用方法、計算屬性或觀察者的相關(guān)知識,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下
    2018-10-10
  • vue3中不支持.sync語法糖的解決方法

    vue3中不支持.sync語法糖的解決方法

    在 Vue 3 中,.sync 修飾符已經(jīng)被移除,在 Vue 2 中,.sync 修飾符是一個語法糖,用于簡化子組件和父組件之間的雙向數(shù)據(jù)綁定,那么本文將給大家介紹一下vue3中不支持.sync語法糖的解決方法,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下
    2024-01-01
  • 一文教會你快速上手vue的登錄界面(最新版)

    一文教會你快速上手vue的登錄界面(最新版)

    幾乎每個項目都會使用登錄頁面,這篇文章主要給大家介紹了如何通過一文教會你快速上手vue的登錄界面,文中通過實例代碼介紹的很詳細(xì),需要的朋友可以參考下
    2022-11-11
  • 組件庫中使用 vue-i18n 國際化的案例詳解

    組件庫中使用 vue-i18n 國際化的案例詳解

    這篇文章主要介紹了組件庫中使用 vue-i18n 國際化,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2023-04-04
  • 解決VuePress頁面亂碼問題

    解決VuePress頁面亂碼問題

    這篇文章主要介紹了解決VuePress頁面亂碼問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2022-09-09
  • vue computed的set方法無效問題及解決

    vue computed的set方法無效問題及解決

    這篇文章主要介紹了vue computed的set方法無效問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • vue-cli和v-charts實現(xiàn)可視化圖表過程解析

    vue-cli和v-charts實現(xiàn)可視化圖表過程解析

    這篇文章主要介紹了vue-cli和v-charts實現(xiàn)可視化圖表過程解析,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
    2019-10-10
  • 淺談vuex之mutation和action的基本使用

    淺談vuex之mutation和action的基本使用

    本篇文章主要介紹了淺談vuex之mutation和action的基本使用,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2017-08-08

最新評論