首先需要知道,当我们用 npm run build
去打包项目的时候,在生成的dist文件中,它会按照内容分成一个个独立的文件,比如css、js等,其中,在js文件下,默认会生成三种类型的js文件以及相对应的js.map文件,分别是:
app.js //自己写的业务逻辑代码
manifest.js //提供底层支撑服务的js代码
vendor.js //第三方引用的js代码
随着我们项目的越来越大,由于所有的js代码都被打包进这三个文件中,可能相对应的app.js等就会越打越大,这时用户去请求服务时,很可能就会因为js文件太大而导致服务器卡顿或者出现短暂的空白现象。
为了解决这一问题,可以使用懒加载的机制。
所谓懒加载,即用到时再加载。
如何使用懒加载:
routes = [
{
path:'/home',
component:() => import('../components/home')
},
{
path:'/about',
component:() => import('../components/about')
}
]
懒加载后再打包的效果:
路由懒加载的三种方式: