Vue项目开发中使用路由懒加载

Vue项目开发中使用懒加载

一、使用路由懒加载的好处

当打包项目时，JavaScript包会变的非常大，影响页面加载，要是通过把不同的路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加提供效率。

二、安装相关的依赖包

详细可查看路由官方文档

安装依赖包文档

安装依赖包完成后，需要配置到项目里面

三、在babel.config.js声明该插件依赖

"@babel/plugin-syntax-dynamic-import"

四、将路由改为按需加载的形式

由imprort 改为const

// import Cate from '../components/goods/Cate.vue'
const Cate = () => import(/* webpackChunkName: "Cate_Parms" */ '../components/goods/Cate.vue')

在使用以上形式时，是要在安装依赖包前提下！！！
这样路由的懒加载就完成了。