vue異步組件技術(shù)

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

用例：

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

es提案的import() (推薦)

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

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

用例：

// 下面2行代碼，沒(méi)有指定webpackChunkName，每個(gè)組件打包成一個(gè)js文件。 const ImportFuncDemo1 = () => import('../components/ImportFuncDemo1') const ImportFuncDemo2 = () => import('../components/ImportFuncDemo2')// 下面2行代碼，指定了相同的webpackChunkName，會(huì)合并打包成一個(gè)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ù)，也可以實(shí)現(xiàn)按需加載。

這種情況下，多個(gè)路由指定相同的chunkName，會(huì)合并打包成一個(gè)js文件。

舉例如下：

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

[轉(zhuǎn)載] https://segmentfault.com/a/1190000011519350 侵刪

轉(zhuǎn)載于:https://www.cnblogs.com/huyifei/p/10210787.html

總結(jié)

以上是生活随笔為你收集整理的vue项目实现按需加载的3种方式的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。