短视频系统源码，解决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

 

 

 

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

 

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

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