一、前言
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。 如图所示,如果没有使用懒加载,我们的业务代码都在那个app开头的js文件里,随着业务的增加,代码量越来越多,js文件也越来越大,用户首次访问页面时可能会出现短暂的白屏。
三个js文件的作用:
- app开头的.js文件:自己编写的业务代码
- manifest开头的.js文件:为打包的代码做底层支撑。例如我们在项目中使用了ES6的或者CommonJS的导出导出规则,这个js文件可以对这些规则进行处理。
- vendor开头的.js文件:第三方的js代码,例如vue、vue-router的代码
- index.html文件引入的是 app开头.js文件
二、使用路由懒加载
如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。路由懒加载的主要作用就是将路由对应的组件打包成一个个的js代码块。路由懒加载 | Vue Router官网
懒加载的方式:
const Foo = () => import('./Foo.vue')
const router = new VueRouter({
routes: [
{
path: '/foo', component: Foo }
]
})