vue異步組件技術

vue-router配置路由，使用vue的異步組件技術，可以實現按需加載。這種方式下一個組件生成一個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技術，也可以實現按需加載。

這種情況下，多個路由指定相同的chunkName，會合并打包成一個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') }

[轉載] https://segmentfault.com/a/1190000011519350 侵刪

轉載于:https://www.cnblogs.com/huyifei/p/10210787.html

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。