短视频系统源码,解决Echarts打包后体积过大问题

短视频系统源码,解决Echarts打包后体积过大问题
从刚开始的图中,能看到, echarts占了很大的体积, 这不能接受
方案一
在index.html模板文件中引入cdn, 打包的时候webpack配置externals ,这样webpack就不会打这个包到vendors里,减少体积,缺点是cnd稳定性可能会有问题,而且是先请求cdn资源之后再请求自己服务器代码,非同源。pass
方案二
babel-plugin-equire 我见社区有这个按需引入echarts的插件, 不过我没研究过, 感兴趣的可以去试试,我选择的是方案三
方案三
在线定制echarts, 可以选择自己想要的功能,生成的js,就会小很多,

将生成的echarts.min.js引入到项目中,替换项目中的echarts引用

import echarts from 'echarts'
变成下面
import echarts from './plugins/echarts.min.js'

也可将这个js放到index.html里面, 
<script src="./static/lib/echarts.min.js"></script>
在main.js文件里面
Vue.prototype.$echarts = window.echarts

同时可以卸载调之前装的echarts
npm unistall echarts

image

 

 

image

 

可以看到 还是很明显的变化的
接下来 再看看打包生成的report现状

image

 

可以看到pdf占比还是很大, 继续优化
pdf插件优化
项目中有pdf预览的功能,安装了pdfjs-dist 和vue-pdf两个插件,后来跟后端协商,走文件流的方式了, 就没用到这两个, 就卸载了, 如果谁有相关方案,欢迎来提

以上就是短视频系统源码,解决Echarts打包后体积过大问题, 更多内容欢迎关注之后的文章

posted @ 2025-08-02 09:26  云豹科技-苏凌霄  阅读(12)  评论(0)    收藏  举报