文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

怎么解决vue项目打包后文件过大问题

2023-06-30 02:04

关注

这篇文章主要讲解了“怎么解决vue项目打包后文件过大问题”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“怎么解决vue项目打包后文件过大问题”吧!

为什么打包后文件过大?

移动app项目,使用vue-cli脚手架搭建,UI主要运用的是Muse-UI,开发过程中为满足需求,混入Element-UI部分组件,加之团队开发,前端不止一人参与,在没有统一规范约束的情况下,编码风格和方式都很迥异和…混乱,以致依赖过多,打包时webpack把所有的库都打包在一起,所以vendor.js文件和app.js文件很大,最后出现进入首个页面时会长时间的白屏,影响用户体验。

怎么解决vue项目打包后文件过大问题

怎么解决vue项目打包后文件过大问题

如何快速解决

在优化复杂性项目时,只增不减可大大减少风险,bug可控,既保证项目正常运行同时减少不必要的工作量

1.路由懒加载【使用es6提案的import()方式】

怎么解决vue项目打包后文件过大问题

这里推荐使用es提案的import()方式是因为未修改前路由定义时也时用import的方式引用,若使用vue路由懒加载组件,修改的地方较多,不够快捷。

怎么解决vue项目打包后文件过大问题

修改后引用方式如图,即:

把import login from '@/views/login/login'修改为

const login = () => import('@/views/login/login')

怎么解决vue项目打包后文件过大问题

其他路由配置不需要变动。

2.CDN引入

怎么解决vue项目打包后文件过大问题

在 index.html 页面 使用cdn加载依赖

 <link rel="stylesheet" href="https://unpkg.com/muse-ui/dist/muse-ui.css" rel="external nofollow" > <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script> <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script> <link rel="stylesheet" href="https://cdn.bootcss.com/material-design-icons/3.0.1/iconfont/material-icons.css" rel="external nofollow" > <link href="https://cdn.bootcss.com/element-ui/2.0.7/theme-chalk/index.css" rel="external nofollow"  rel="stylesheet"> <script src="https://cdn.bootcss.com/jquery/3.1.0/jquery.js"></script> <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.js"></script> <script src="https://cdn.bootcss.com/qs/6.5.2/qs.min.js"></script> <script src="https://cdn.bootcss.com/element-ui/2.0.7/index.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/muse-ui/dist/muse-ui.js"></script> <script src="https://cdn.bootcss.com/exif-js/2.3.0/exif.js"></script>

添加 webpack.base.conf.js 配置

  externals: {    'element-ui': 'ELEMENT',    'vue': 'Vue',    'querystring':'Qs',    'vue-router': 'VueRouter',    'MuseUI': 'MuseUI',    'axios':'axios',    'jquery': "jQuery",    "EXIF":'EXIF',    'echarts': 'echarts'  },

怎么解决vue项目打包后文件过大问题

尽可能把在main.js中的引用的依赖用cdn在index.html中引用

在开源项目 CDN 加速服务中可以查找到大部分开源库的cdn

这里是不建议在优化已成型项目时直接把main.js中依赖引用部分删掉,如果删掉需要在公共JS中重新引入或者在所需依赖页面中导入,还要注意导入时定义的名称需要跟项目中已存在的依赖引用变量名一致,这将加大自己的工作量,新搭建项目或者想深入学习让代码更纯净者可以去度娘找资料研究哦

这样优化就告一段落了,打包后文件大小如下:

怎么解决vue项目打包后文件过大问题

vendor.***文件大小从1.98M减少至342K

app.***文件大小从573K减少至53.3K

页面加载速度:

怎么解决vue项目打包后文件过大问题

进入首个页面时长从平均13.6S减少至平均1.12S,近乎秒进。

最后对项目使用的图片素材进行压缩处理,修改config/index.js productionSourceMap: false 去除打包时生产.map文件,加快打包速度

感谢各位的阅读,以上就是“怎么解决vue项目打包后文件过大问题”的内容了,经过本文的学习后,相信大家对怎么解决vue项目打包后文件过大问题这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯