vue-cli項目中，H5頁面打包加載優化

問題
最近做到H5項目，打包在測試環境發佈後，chunk-vendorjs文件加載6s阻塞，使得頁面打開看起來非常慢

解決方案
1，因爲是chunkjs包體積過大，第一個想到的是減小打包後的hcunk-vendor文件體積
我們知道，webpack打包的時候，會把項目中import涉及到的node modules裏面的包都打進去。
所以項目開發中的第三方庫，除了可以依賴從node modules中的打包，還可以通過webpack的externals參數來配置，這裏我們設定只需要在生產環境中才需要使用。

  configureWebpack: {
    externals: {
      'echarts': 'echarts',
      // 'axios': 'axios',
      // "moment": "moment",
      // 'jquery':'$',
      // 'vue':'Vue',
      // 'vconsole':'VConsole',
      // 'vue-router': 'VueRouter'
    }
  }

依賴CDN後，可以看到chunkjs的包體積被壓縮
2，但同時因爲瀏覽器獲取資源是同步獲取，多依賴了cdn鏈接包，導致多若干個請求，後來想到第二種方法，把打包後的chunkjs文件掛載到cdn上面，在發佈測試環境之前，更改dev/html裏面的src引入鏈接，速度明顯有了優化
3，我們知道瀏覽器加載優化有一個方法，就是通過prefetch和preload方法，
3.1,preload，是在首頁加載的時候，會把項目中體積巨大的瀏覽器認爲優先級高的資源提前加載；而prefetch是在瀏覽器空閒的時候，加載資源，所以preload和prefetch是優化了子頁面加載速率。但其實對於H5頁面對帶寬要求很高的來說首屏加載比較慢了，所以考慮關閉preload和prefetch

4，考慮將import換成require
import是編譯時調用，一般只能放在頭部，而require是運行時調用，理論上可以放在任何地方