nginxjs壓縮

『壹』 webpack生成bundle.js文件為什麼那麼大，會影響載入速度嗎

當然會比較大，因為不光打包了自己開發的JavaScript文件，還把依賴(就是那些第三方的庫文件)也都打包進去了，確實會比較大。
webpack的好處有幾項
解決依賴關系
多模塊化標准支持
多功能插件支持
相比這些在軟體工程中急需解決的問題，「大」這個小事兒可以通過其他方式解決。
譬如，
uglify，可以很大程度上壓縮源代碼，使之體積減小。
或者通過nginx的gzip_comp_level選項可以設置1 ~ 9不同的壓縮級別，以降低網路傳輸壓力。
兩者混用效果奇佳，而且也是最常見最有效的方式
例如React.js的源文件有610k左右，uglify之後已經不到200k了，再通過nginx壓縮一把，用戶在瀏覽器下載時，只有40k左右了。
以當今的網路環境，除非自己有精確測試結果，否則真心沒必要一開始就考慮什麼文件大小的問題，咱們已經不是那個時代了

『貳』 Nginx+ffmepg+jQueryVideo.js實現m3u8在線視頻播放[windows平台]

在Windows平台上，使用Nginx、ffmpeg與jQueryVideo.js實現m3u8在線視頻播放的步驟如下：

1. 配置Nginx以解析視頻文件：

   • 建立一個專用站點，用於存儲所有視頻源。
   • 設置域名映射和解析規則，確保通過特定域名可以訪問到該站點。
   • 在Nginx配置文件中，定義一個上游伺服器，指向本地伺服器。
   • 配置虛擬主機，使所有通過特定域名訪問的請求指向存儲視頻文件的指定目錄。

2. 通過ffmpeg生成m3u8文件：

   • 確保視頻文件已轉換為H264 MP4格式。這是因為m3u8格式通常與HLS一起使用，而HLS要求視頻編碼為H264。
   • 使用ffmpeg命令將MP4文件轉換為TS文件，並生成對應的m3u8文件。命令格式大致為：ffmpeg i input.mp4 codec: start_number 0 hls_time 10 hls_list_size 0 f hls output.m3u8。其中，input.mp4是輸入文件，output.m3u8是輸出文件，hls_time設置每個TS片段的時長。
   • 確保設置了正確的ffmpeg路徑，以及輸入輸出文件名。
   • 完成轉換後，生成的TS文件與m3u8文件將用於後續步驟。

3. 使用jQueryVideo.js實現在線播放：

   • 在網頁中引入jQueryVideo.js庫。
   • 使用jQueryVideo.js提供的API或標簽，設置視頻播放器。
   • 通過poster屬性設置視頻預覽圖，datasetup屬性配置播放器選項。
   • 關鍵在於正確引用生成的m3u8文件作為視頻源。例如，在<video>標簽的src屬性中指定m3u8文件的URL。
   • 確認m3u8文件可正常下載後，即可實現在線播放。

通過以上步驟，你可以在Windows平台上使用Nginx、ffmpeg與jQueryVideo.js實現m3u8在線視頻播放。這套組合能有效解決大型視頻文件在Windows平台上的播放問題，提供流暢的視頻體驗。