Vue項目打包後體積優化

背景

這段時間使用Vue+Typescript完成了對公司用戶管理系統的重構，替換掉了之前的JSF實現了準前後端分離。

目前還沒有采取前端獨立部署的模式，前端文件打包後需要放到tomcat中進行訪問。

公司的服務器帶寬100M，希望系統能支持500併發，且沒有購買CDN服務。對於打包後的前端文件chunk-vendors.js就達到了900kb，急需優化。

解決

• 路由懶加載

  參考文章：vue項目實現路由按需加載(路由懶加載)的3種方式、@babel/plugin-syntax-dynamic-import

  1. 安裝依賴：yarn add @babel/plugin-syntax-dynamic-import --dev

  2. 修改vue-router

     component: () => import( /* webpackChunkName: "login" */ '../views/Login.vue')
     

  3. babel添加配置：

     // babel.config.js
     presets: [
         '@vue/cli-plugin-babel/preset',
         ['@babel/preset-env', //添加 babel-preset-env 配置
           {
             'modules': false
           }
         ]
     ]
     plugins: [
         [
           'component',
           {
             'libraryName': 'element-ui',
             'styleLibraryName': 'theme-chalk'
           },
           'syntax-dynamic-import'
         ]
     ]
     

• 資源按需加載（ElementUI按需引入）

  參考文章：element-ui官方文檔

  1. 安裝依賴：yarn add babel-plugin-component --dev
  2. babel添加配置：見上一步
  3. 在項目中按需引入ElementUI
     

• 使用gzip

  參考文章：vue-cli 3.0 build包太大導致首屏過長的解決方案

  1. 安裝依賴：yarn add compression-webpack-plugin

  2. webpack添加配置：

     // vue.config.js
     configureWebpack: () => {
        if (process.env.NODE_ENV === 'production') {
          return {
            plugins: [
              new CompressionPlugin({
                test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要壓縮的文件類型
                threshold: 10240, // 歸檔需要進行壓縮的文件大小最小值，我這個是10K以上的進行壓縮
                deleteOriginalAssets: false, // 是否刪除原文件
                minRatio: 0.8
              })
            ]
          }
        }
     }
     

  3. 若部署到tomcat，需配置server.xml：

     <Connector port="8080" protocol="HTTP/1.1"
                compression="on"
                compressionMinSize="1024"
                compressableMimeType="text/html,text/xml,text/plain,text/javascript,text/csv,application/javascript,application/json,application/xml"
     />
     

  4. 若獨立部署，需配置ngnix：

     # gzip config
         gzip on;
         gzip_min_length 1k;
         gzip_comp_level 9;
         gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
         gzip_vary on;
         gzip_disable "MSIE [1-6]\.";