問題描述

前端專案打包之後 .js檔案太大，導致專案第一次載入的時候太慢，查閱各種解決方案資料，彙總以下幾點：

1.使用cdn引入不怎麼改變的第三方庫：

類似於

   <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
   <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>

webpack.base.conf.js 新增：

      externals: {
         'vue': 'Vue',
         'vue-router': 'VueRouter',
         'element-ui': 'ELEMENT',
         'echarts': 'echarts',
         'axios': 'axios'
      },
 

2.使用vue的懶載入:

官網地址[https://router.vuejs.org/zh/guide/advanced/lazy-loading.html]，
但是官網有一句

        如果您使用的是 Babel，你將需要新增 syntax-dynamic-import 外掛，才能使 Babel 可以正確地解析語法。

這個外掛依賴於6.x.babel 需要注意

3.伺服器和前端配置開啟壓縮

伺服器nginx配置新增:

        gzip on;
        gzip_static on;  --這個很重要 不加的話 訪問載入的還是未壓縮的檔案

前端配置config/index.js：

        productionGzip: true,
        然後再引入外掛 compression-webpack-plugin
        需要注意版本  "compression-webpack-plugin": "^1.1.12",

前面兩種 檔案大小並沒有減少太多 使用第三種的時候減少的最多