VUE路由懒加载的方法小结

随着项目的增大,我们需要将项目中的资源进行懒加载?那么在vue项目中如何实现呢?

1、方法一:ES6的import()方法

利用import 的方法进行懒加载,注意  /* webpackChunkName: "group-foo" */  为魔法注释,可将重命名打包后文件的名字,如果名字一致路由,最后打包到一个文件中。

const router = new VueRouter({
  routes: [
    { path: '/foo', component: () => import(/* webpackChunkName: "group-foo" */ './Foo.vue') }
  ]
})

2、方法二:require()方法

 利用resolve 的方法,如下所示

const router = new VueRouter({
  routes: [
    { path: '/foo', component:resolve=>(require(["./Foo.vue"],resolve)) }
]
})

3、方法三:异步组件+webpack的ensure()方法

const router = new VueRouter({
  routes: [
    { path: '/foo', component: r => require.ensure([], () => r(require('./Foo.vue')), 'group-foo') }
  ]
})

注意:在以上的基础上,webpack.prod.conf.js 中的需要改成如下配置:

output: {
    path: config.build.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[name].[chunkhash].js')   // 此处的name如果改为id则不能按文件夹名字进行打包
  },

 以上三种方法,其实还是有些区别的,具体区别还不是特别理解。

posted @   茶记忆  阅读(1772)  评论(0编辑  收藏  举报
编辑推荐:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
阅读排行:
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
历史上的今天:
2019-07-27 H5视频播放小结(video.js不好用!!!)
2018-07-27 session与cookie的区别以及HTML5中WebStorage理解
点击右上角即可分享
微信分享提示