vue按需加载的几种方式

1.vue异步组件技术

使用vue-router配置路由&＃xff0c;使用vue的异步组件技术&＃xff0c;可以实现按需加载

{path: &＃39;/test&＃39;,name: &＃39;Test&＃39;,component: resolve &＃61;> require([&＃39;./TestDemo&＃39;], resolve)
}

2.使用import

路由懒加载

const Foo &＃61; () &＃61;> import(/* webpackChunkName: &＃39;foo&＃39; */&＃39;./Foo.vue&＃39;);
const router &＃61; new VueRouter({routes: [{ path: &＃39;/foo&＃39;, component: Foo }]
})

 我们可以设置webpackChunkName&＃xff0c;并且在webpack.config文件里的output中可以使用

output: {chunkFilename: &＃39;[name].bundle.js&＃39; // 对应webpackChunkName
},

3.使用webpack提供的require.ensure()

 可以在注册局部组件时使用&＃xff1a;

components: {pdfViewer: r &＃61;> require.ensure([], () &＃61;> r(require(&＃39;./pdfViewer&＃39;)), &＃39;pdfViewer&＃39;)
}

参考资料&＃xff1a; vue项目实现按需加载的3种方式

require.ensure

vue 异步组件