vue項目打包之后 js文件太大的問題

問題描述

前端項目打包之后 .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",

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