vue 异步组件 (按需加载)
Posted chenmeijiao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue 异步组件 (按需加载)相关的知识,希望对你有一定的参考价值。
什么是异步组件?
异步组件就是定义的时候什么都不做,只在组件需要渲染(组件第一次显示)的时候进行加载渲染并缓存,缓存是以备下次访问。
为什么用异步组件?
在大型应用中,功能不停地累加后,核心页面已经不堪重负,访问速度愈来愈慢。为了解决这个问题我们需要将应用分割成小一些的代码块,并且只在需要的时候才从服务器加载一个模块,从而提高页面加载速度。
异步组件的写法:
1、工厂函数
// 全局组件注册 Vue.component(‘Home, function (resolve) { // 这个特殊的 `require` 语法将会告诉 webpack // 自动将你的构建代码切割成多个包,这些包 // 会通过 Ajax 请求加载 require([‘./Home‘], resolve) }) // 局部组件注册 new Vue({ components: { ‘Home‘: () => resolve => { require([‘./Home‘], resolve) } } })
2、webpack和ES6推荐返回一个 Promise(推荐)
// 下面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() 这种情况下,多个路由指定相同的chunkName,会合并打包成一个js文件。
{ path: ‘/promisedemo‘, name: ‘PromiseDemo‘, component: r => require.ensure([], () => r(require(‘../components/PromiseDemo‘)), ‘demo‘) }, { path: ‘/hello‘, name: ‘Hello‘, component: r => require.ensure([], () => r(require(‘../components/Hello‘)), ‘demo‘) }
4、高级路由
const AsyncComponent = () => ({ // 需要加载的组件 (应该是一个 `Promise` 对象) component: import(‘./MyComponent.vue‘), // 异步组件加载时使用的组件 loading: LoadingComponent, // 加载失败时使用的组件 error: ErrorComponent, // 展示加载时组件的延时时间。默认值是 200 (毫秒) delay: 200, // 如果提供了超时时间且组件加载也超时了, // 则使用加载失败时使用的组件。默认值是:`Infinity` timeout: 3000 }) { path: ‘/AsyncComponent‘, name: ‘AsyncComponent‘, component: AsyncComponent },
以上是关于vue 异步组件 (按需加载)的主要内容,如果未能解决你的问题,请参考以下文章