vue中使用videojs打包后体积过大优化

时间：2024-10-10 08:06:25

videojs 是一个非常好的js库，可以支持各种格式的视频播放，也能做直播流。官网地址 https://videojs.com/

在vue项目中也可以使用 vue-video-player ，更好的与vue结合使用，封装成了相应的组件，git: https://github.com/surmon-china/vue-video-player

根据官方文档的提示：

npm install vue-video-player --save

安装相应的依赖，配置相应的options，和方法。

这写起来一切都是那么的爽，没有问题。但是在执行 npm run build 之后，就会发现，vendor-async 文件占用过大，达到了900多K

使用  npm run build --report 分析，发现就是videojs占用过大

vue中使用videojs打包后体积过大优化

进一步的研究，发现，video.min.js 源文件只有190KB，vue-video-player.js 只有6KB，但是打包只有就会变成900多KB。

我的解决思路是：将video,min.js 和 vue-video-player.js 单独拿出来放在static目录下，在 index.html中引入

<!-- Include the videojs library -->

  <script src="./static/video.min.js"></script>

<!-- videojs JS Vue -->

  <script src="./static/vue-video-player.js"></script>

在mian.js 中注册组件

// global video-player components

Vue.use(window.VueVideoPlayer);

将组件中引入的组件删除

再执行npm run build

vue中使用videojs打包后体积过大优化

文件大小从 965KB 变为 36.4KB，文件大小明显小了很多，如果公司有条件，可以将video.min.js 和 vue-video-player.js 放在cdn服务器上，通过cdn加速，会更快。

参考：

Webpack 打包优化之体积篇

相关文章