Vue首页加载过慢的解决方式
更新时间：2024年08月07日 14:14:32 作者：晚星@
这篇文章主要介绍了Vue首页加载过慢的解决方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
什么导致了首页初步加载过慢
app.js文件体积过大
解决方法
1、Vue-router懒加载
vue-router懒加载可以解决首次加载资源过多导致的速度缓慢问题：vue-router支持WebPack内置的异步模块加载系统。
所以，那些使用较少的路由组件不必打包进bundles里，只需要在路由被访问时按需加载。
路由懒加载写法：
2、在webpack打包的过程中，将多余文件去掉
如map文件，
即在config/index.js中将productionSourceMap的值修改为false，
就可以在编译时不生成.map文件了（实测效果不是特别明显）
3、第三方库使用CDN引入
在项目开发中，我们会用到很多第三方库，如果可以按需引入，我们可以只引入自己需要的组件，来减少所占空间，但也会有一些不能按需引入，我们可以采用CDN外部加载，在index.html中从CDN引入组件，去掉其他页面的组件import，修改webpack.base.config.js，在externals中加入该组件，这是为了避免编译时找不到组件报错。
注意：
- 删掉项目中import的这几个相关的，以及Vue.use()。
- eslint插件报错not defined的话，前面加个window，如window.VueRouter。
（用这种方法需要注意，你前端所在的服务器可以访问外网）
4、vue-cli开启打包压缩和后台配置gzip访问
（目前只知道nginx可以开启gz文件）
5、nginx 做 js css 文件缓存
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
在环保仓管项目中,做了一个每月对药品、消耗品、设备的进出,进行统计百分比,效果好看,后面经常在用这个样式,下面通过示例代码分享Vue3 Echarts通用的折线图带阴影效果实现,感兴趣的朋友一起看看吧2024-07-07
这篇文章主要为大家详细介绍了Vue+Node.js结合Axios实现Token无感刷新的全流程,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下2025-11-11
这篇文章主要为大家介绍了vue新建环境变量以及网络请求工具axios的二次封装详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-06-06
defineProps 是 Vue 3 Composition API 中用来声明组件接收的 props 的方法,本文主要为大家介绍了defineProps的解构和不解构,感兴趣的可以了解下2025-02-02
这篇文章主要介绍了vue DatePicker日期选择器时差8小时问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了Vue3中的h函数及使用小结,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
vue3.2+ts实现在方法中可调用的拟态框弹窗(类el-MessageBox)
这篇文章主要介绍了vue3.2+ts实现在方法中可调用的拟态框弹窗（类el-MessageBox）,这个需求最主要的是要通过方法去调用，为了像el-messagebox使用那样方便，需要的朋友可以参考下2022-12-12
这篇文章主要介绍了vue中使用mixins/extends传入参数的方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-05-05
这篇文章主要介绍了vue3 多种方法的锚点定位，使用 Vue Router 导航守卫可以简化导航逻辑、统一管理导航逻辑和进行权限控制，但需要学习和理解相关概念，并且需要手动编写和管理导航守卫的逻辑,本文给大家介绍的非常详细，需要的朋友可以参考下2023-07-07
在Web开发中,获取DOM元素的宽度、高度以及滚动位移是常见的需求,这篇文章主要给大家介绍了关于vue获取组件中元素宽度常用的方法,需要的朋友可以参考下2024-08-08
最新评论