文章目录

• • • 路由懒加载
    • • 官方解释
      • 解释
    • 路由懒加载使用
    • • 最早的路由懒加载写法
      • amd写法
      • es6结合webpack代码分割
    • [懒加载打包 分包解析](https://blog.csdn.net/weixin_42448623/article/details/108221403)

路由懒加载

官方解释

当打包构建应用时，javascript包会变得非常大，影响页面加载。
把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件。

解释

首先，路由中通常会定义很多不同的页面，
这个页面最后会被打包到一个js文件里面，必然会导致这个js文件非常的大，
如果一次性从服务器请求下来，可能需要花费一些时间，甚至用户电脑上还出现的短暂空白的情况，
为了避免这种清况，使用路由懒加载

路由懒加载使用

最早的路由懒加载写法

const home = resolve => { require.ensure(
	['@/components/About.vue'],
	()=>{  resolve(require('@/components/About.vue'))}
)}

amd写法

const home = resolve => resolve(require('@/components/About.vue'), resolve)

es6结合webpack代码分割

const home = ()=>import('@/components/About')
// {path:'/about',name:'user',component:()=>import('@/components/About')},

懒加载打包 分包解析