如果有這樣一個項目，js腳本數量100+，其中50個是各種框架或庫，css數量20+，圖片若干 。那么，不用說，這個頁面加載起來，一定快不了。
靜態資源的請求和加載速度，直接影響頁面呈現，應該怎么優化呢？
不請求 - 用cache
最好的方式就是盡量引用公共資源，同時設置緩存，不去重新請求資源
也可以運用PWA的離線緩存技術，可以幫助wep實現離線使用
從策略上說，如果業務類型允許的話，可以做某些降級。比如，弱網優先使用緩存文件。網絡狀況分為 WiFi、4G、3G、2G、unknown ，其中 2G和unknown 被我們認為是弱網。先保證體驗，再保證更新
避免資源屬性為空或者錯誤。當
、標簽的 href 無效，或
打包有很多方式，比如使用工具webpack、rollup，可以實現打包js，打包小圖片至js（內嵌base64），生成雪碧圖，甚至把項目打包為單個html文件
拆分則是把開發時使用的庫，單獨剝離出來，以公共資源的方式引入
還有就是要把過大的包，拆分成多個較少的包，防止單個資源耗時過大
壓縮資源
前端打包時壓縮
服務器上的zip壓縮
圖片壓縮（比如tiny），使用webp等高壓縮比格式
盡量保證頁面的 HTML 內容在 1KB 以內，這樣整個 HTML 的內容請求就可以在一個 RTT 內請求完成，最大限度地提高 HTML 載入速度。通常情況下，TCP 網絡傳輸的最大傳輸單元（Maximum Transmission Unit，MTU）為 1500B
靜態資源分域存放
從不同域名請求資源。因為大多數瀏覽器的並發數量都控制在6以內，同一時間針對同一域名下的請求有一定數量限制，超過限制數目的請求會被阻塞。如果資源來自於多個域下，可以增大並行請求和下載速度。如下是jd img資源的域名
延遲、異步、預加載、懶加載
對於非首屏的資源，可以使用 defer 或 async 的方式引入
也可以按需加載，在邏輯中，只有執行到時才做請求
對於多屏頁面，滾動時才動態載入圖片
對於移動端首屏加載后可能會被使用的資源，需要在首屏完成加載后盡快進行加載
參考資料
【FE】這么多前端優化點你都記得住嗎？
Web靜態資源緩存及優化
美團金融掃碼付靜態資源加載優化實踐
瀏覽器緩存知識小結及應用