欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vue项目打包后体积优化

程序员文章站 2024-02-10 16:09:10
...

背景

这段时间使用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')
      

      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
      Vue项目打包后体积优化
  • 使用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]\.";