vue按需加載實例詳解
更新時間：2019年09月06日 15:00:04 作者：極速代碼
在本篇文章里小編給大家整理的是關于vue按需加載實例的相關知識點內(nèi)容，有需要的朋友們可以學習參考下。
vue-router配置路由，使用vue的異步組件技術，可以實現(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技術，也可以實現(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)容，感謝大家的學習和對腳本之家的支持。
相關文章
這篇文章主要為大家介紹了vue導出少量pdf文件實現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2023-06-06
這篇文章主要為大家介紹了Vue?uni-app以H5模式引入Jquery配置教程詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-09-09
這篇文章主要介紹了對vuex中store和$store的區(qū)別說明，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
element-ui修改el-form-item樣式的詳細示例
在使用element-ui組件庫的時候經(jīng)常需要修改原有樣式,下面這篇文章主要給大家介紹了關于element-ui修改el-form-item樣式的詳細示例,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了vue 數(shù)據(jù)操作的相關資料，幫助大家更好的理解和使用vue，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue中的循環(huán)遍歷對象、數(shù)組和字符串，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
Vue3中createWebHistory和createWebHashHistory的區(qū)別詳析
這篇文章主要給大家介紹了關于Vue3中createWebHistory和createWebHashHistory區(qū)別的相關資料,文中通過實例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2023-06-06
今天小編就為大家分享一篇解決vuejs項目里css引用背景圖片不能顯示的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue-pdf打包后無法預覽問題及修復方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
Vuex 是一個專為 Vue.js 應用程序開發(fā)的狀態(tài)管理模式，本文給大家分享Vue3.0中快速上手Vuex狀態(tài)管理的方式，本文通過實例代碼講解的很詳細，對大家學習Vuex狀態(tài)管理相關知識有很大的幫助，感興趣的朋友一起學習吧2021-05-05