jeecg-vue 前端精简方案记录

最新推荐文章于 2024-07-25 23:52:05 发布

August1049

最新推荐文章于 2024-07-25 23:52:05 发布

阅读量1.9k

点赞数 1

文章标签：前端

本文链接：https://blog.csdn.net/lkjhgf50/article/details/124605844

版权

本文探讨了前端项目jeecg-vue的性能优化策略，包括gzip压缩、移除sourceMap、路由懒加载、AntdV组件懒加载、图片资源压缩、Moment按需加载和本地资源加速等。通过实施这些措施，成功将打包文件整体大小减少了50%，chunk-vendor.js文件减小68%。然而，CDN加速和部分按需加载方案因实际问题未采用。

摘要由CSDN通过智能技术生成

本博客仅做个人记录，所述方法仅供参考。

1，现有前端优化方案：

gzip压缩（jeecg-vue项目已预先完成，需要服务端开启对应的配置如nginx gzip on 等等）
打包移除sourceMap（jeecg-vue项目已预先完成）
路由懒加载（jeecg-vue项目已预先完成）
组件库（AntdV）懒加载（jeecg-vue项目已配置lazy_antd.js文件，需手动调整部分文件的代码如：babel.config.js、main.js 等具体可以查询AntdV官网或查询jeecgboot官方网站）
Icon图标库按需加载（jeecg-vue项目已配置，需手动调整部分代码但考虑实际情况如：icon变量名问题等，故此方案不采用）
图片资源压缩【需要手动添加webpack配置】
Moment库语言配置文件按需加载【需要手动添加webpack配置】
移除不需要的前端功能模块，其对应的依赖库也一起移除【如在线开发模块对应的库比较大@jeecg/antd-online-XXX，还有对应的一些图表库如viser-vue，因为已经用了echarts在功能上有重复，等等其他功能库可根据自己的业务场景酌情删减】
CDN加速：将axios，vue，vuex，echarts等库排除在打包以外，以资源压缩包地址的形式如：https://cdn.jsdelivr.net/npm/echarts@5.3.0/dist/echarts.js引入index.html文件中（经过测试发现cdn网络不稳定，故此方案不采用）
本地资源加速：将axios，vue，vuex，echarts等库排除在打包以外，将对应库的资源压缩包预先下载如vue.min,js文件，放在public文件夹下，再以本地文件资源的形式引入index.html文件中【需要手动添加webpack配置】

以上所述，仅仅为可以优化和删减的点，可能有不对的地方欢迎指正。其中对应的具体操作可以自行搜索。

贴出几个链接：

ant-design-vue-jeecg 项目首屏加载过慢的问题

ant-design-vue-jeecg关于首页加载过慢的优化小结

2，打包文件体积分布对比图

精简前