本篇文章给大家带来的内容是关于vue.js的组件异步加载的实现方法（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
当项目中组件特别多的时候，通过webpack打包的组件非常多，如果在访问其中某一个路由对应的组件时，加载了所有组件的文件，对于性能的消耗是非常浪费的。
此时，我们就需要使用组件异步加载，即进入对应的组件时，只加载核心组件、代码和对应的组件代码。
通过vue-router和webpack实现
需要插件支持： babel-plugin-syntax-dynamic-import
import vue from 'vue'import vuerouter from 'vue-router'// 这里不在提前引入所有需要的组件，而是在路由配置项的component中按需引入即可// import login from ('../components/login/login.vue')// import homepagefrom ('../components/login/homepage.vue')const homepage= () => { import('../components/home/homepage.vue')}vue.use(vuerouter)const route = [ { path: '/login', name: "登陆", // 当该路由被调用时，再去请求对应的组件内容 component: () => import('../components/login/login.vue') }, { path: '/homepage/:id', name: "首页", // 当该路由被调用时，再去请求对应的组件内容 component: () => import('../components/home/homepage.vue') }]export default () => { return new vuerouter ({ route })}
相关推荐：
比较简单的异步加载js文件的代码_javascript技巧
在vue+webpack中如何实现异步组件加载？
以上就是vue.js的组件异步加载的实现方法（代码）的详细内容。