vue中使用videojs打包后體積過大優化

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占用過大

 

 

 

進一步的研究，發現，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

 

 

 

文件大小從 965KB 變為 36.4KB，文件大小明顯小了很多，如果公司有條件，可以將video.min.js 和 vue-video-player.js 放在cdn服務器上，通過cdn加速，會更快。

 

參考：

Webpack 打包優化之體積篇