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则不能按文件夹名字进行打包 },
以上三种方法,其实还是有些区别的,具体区别还不是特别理解。
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!
2019-07-27 H5视频播放小结(video.js不好用!!!)
2018-07-27 session与cookie的区别以及HTML5中WebStorage理解