vue路由懒加载(通过syntax-dynamic-import插件实现懒加载)

第一步

npm install --save-dev @babel/plugin-syntax-dynamic-import
1
第二步 在项目中babel.config.js文件中,在文件中写入: “@babel/plugin-syntax-dynamic-import”

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "import",
      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true },
      //配置路由懒加载插件
     "@babel/plugin-syntax-dynamic-import"
    ]
  ]
}


第三步 在index.js文件中,将文件修改成按需加载的形式

// import Login from '../views/Login.vue'
// import Home from '../views/Home.vue'
// import Register from '../views/Register.vue'
// import RegisterSuccess from '../views/RegisterSuccess.vue'
// import ResetPassword from '../views/ResetPassword.vue'
// // 产品管理+产品列表
// import ProductList from '../components/productManager/ProductList'
// import ProductPublish from '../components/productManager/ProductPublish'

const Login = ()=>import(/*webpackChunkName: "Login" */"../views/Login")
const Home = ()=>import(/*webpackChunkName: "Home" */"../views/Home")
const Register = ()=>import(/*webpackChunkName: "Register" */"../views/Register")
const RegisterSuccess = ()=>import(/*webpackChunkName: "RegisterSuccess" */"../views/RegisterSuccess")
const ResetPassword = ()=>import(/*webpackChunkName: "ResetPassword" */"../views/ResetPassword")
const ProductList = ()=>import(/*webpackChunkName: "ProductList" */"../components/productManager/ProductList")
const ProductPublish = ()=>import(/*webpackChunkName: "ProductPublish" */"../components/productManager/ProductPublish")
怎么看懒加载有没有效果
这是加载后的,点击一个页面或者进入一个组件,都会在控制台出现一个css和js文件,这证明有效果了

在这里插入图片描述

没有做懒加载的效果是这样的:

在这里插入图片描述

 

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值