组件懒加载也叫按需加载;
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
打包 build 后的 dist 中 js 包文件太大,影响页面加载速度,使用 vue 的异步组件和 webpack 的代码分割功能,实现路由组件的懒加载;
下面通过 vue 的异步加载和 webpack 来实现组件懒加载;
先看例子不使用路由懒加载的情况:
import Vue from "vue";
import Router from "vue-router";
import HelloWorld from "@/components/HelloWorld";
import Login from "@/components/Login";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: HelloWorld
}, {
path: "/login",
name: "Login",
component: Login
}
]
});
加上按需加载后:
import Vue from "vue";
import Router from "vue-router";
// import HelloWorld from "@/components/HelloWorld";
//importLoginfrom"@/components/Login";
Vue.use(Router);
export default new Router({
routes: [
{
path: "/",
name: "HelloWorld",
component: () => import(/* webpackCunkName: "HelloWorld" */ "@/components/HelloWorld")
}, {
path: "/login",
name: "Login",
component: () => import(/* webpackCunkName: "Login" */ "@/components/Login")
}
]
});
按需加载的核心代码就是这一段,vue和react框架都能这样使用;这个能力不是vue框架提供的,而是 webpack 提供的,需要 webpack 的版本在 2.4 以上;
() => import(/* webpackCunkName: "HelloWorld" */ "@/components/HelloWorld")
到此未知就完成了,按需求加载就搞定了,很简单吧;