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]\.";