vite优化

1.利用 rollup-plugin-analyzer 插件进行进行代码体积分析，从而优化你的代码。

根据项目体积分析，进行接下来的优化：

（一）使用unplugin-vue-components插件按需加载antd vue 组件：

使用步骤
1、安装插件

pnpm i unplugin-vue-components -D

2、vite中去使用：vite.config.ts中配置

// 这里
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
 
  const vitePlugins: (Plugin | Plugin[])[] = [

    vue(),

    //按需加载antd
    Components({
      dirs: ['src/components', 'src/**/components'],
      resolvers: [AntDesignVueResolver()],
      dts: 'types/components.d.ts',
    }),
  ];

（二）按需加载echarts组件
使用步骤：

专门设置一个echarts配置文件

 // 文件路径 @/lib/echarts.js 自行配置
 
 // 加载echarts，注意引入文件的路径
 import echarts from 'echarts/lib/echarts'
 
 // 再引入你需要使用的图表类型，标题，提示信息等
 import 'echarts/lib/chart/bar'
 import 'echarts/lib/chart/line'
 import 'echarts/lib/component/legend'
 import 'echarts/lib/component/title'
 
 export default echarts

在需要的组件内加载echarts，绘制图表

 <template>
     // ... 与上面实例相同
 </template>
 <style>
     // ... 与上面实例相同
 </style>    
 <script>
 // 重点：此位置引入的是你单独配置的echarts
 import echarts from '@/lib/echarts'
 export default {
     mounted () {
         // ...与上面实例相同
     },
     methods: {
         draw () {
             // ... 与上面实例相同
         }
     }
 }   
 </script>

(三)开启gizp压缩或者brotli 压缩
使用步骤：

安装插件：

pnpm add -D vite-plugin-compression

配置文件：
vite.config.js

import viteCompression from 'vite-plugin-compression'

export default defineConfig({
  plugins: [
    // ...
    viteCompression({
      filename: '[path].gz[query]', // 压缩后的文件名
      algorithm: 'gzip', // 压缩格式：gzip、brotliCompress,
      test: /\.(js|css|svg)$/,
      threshold: 10240,// 只处理比这个值大的资源，按字节算
      minRatio: 0.8, // 只有压缩率比这个值小的文件才会被处理，压缩率=压缩大小/原始大小，如果压缩后和原始文件大小没有太大区别，就不用压缩
      deleteOriginalAssets: false // 是否删除原文件，最好不删除，服务器会自动优先返回同名的.gzip资源，如果找不到还可以拿原始文件
    })
  ],
});

gzip 与 brotli 在 nginx 内的配置

http {
  # 开启gzip
  gzip on;
  # 开启gzip_static
  # gzip_static 开启后可能会报错，需要安装相应的模块, 具体安装方式可以自行查询
  # 只有这个开启，vue文件打包的.gz文件才会有效果，否则不需要开启gzip进行打包
  gzip_static on;
  gzip_proxied any;
  gzip_min_length 1k;
  gzip_buffers 4 16k;
  #如果nginx中使用了多层代理 必须设置这个才可以开启gzip。
  gzip_http_version 1.0;
  gzip_comp_level 2;
  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 off;
  gzip_disable "MSIE [1-6]\.";

  # 开启 brotli压缩
  # 需要安装对应的nginx模块,具体安装方式可以自行查询
  # 可以与gzip共存不会冲突
  brotli on;
  brotli_comp_level 6;
  brotli_buffers 16 8k;
  brotli_min_length 20;
  brotli_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript image/svg+xml;
}

(四)图片压缩
使用步骤
安装插件

# pnpm
pnpm install vite-plugin-imagemin -D
 # npm
npm install vite-plugin-imagemin -D
 # yarn
yarn add vite-plugin-imagemin -D 

imagemin 安装问题
感谢大佬指出这个问题,这个问题我在vite-plugin-imagemin的README中有看到相应的解决方案，如下

由于 imagemin 在国内不好安装。现提供几个解决方案

1.使用 yarn 在 package.json 内配置(推荐)

"resolutions": {"bin-wrapper": "npm:bin-wrapper-china"}, 

2.使用 npm,在电脑 host 文件加上如下配置即可

199.232.4.133 raw.githubusercontent.com 

• 由于我的项目图片用的不多，看了有些大佬还对这个图片插件进行优化了，大家可试试，我个人没试过

（五）vite配置，提高了打包速度
vite.config.ts 打包配置：

    build: {
      cssCodeSplit: true, //css 拆分
      sourcemap: false, //不生成sourcemap
      assetsInlineLimit: 5000, //小于该值 图片将打包成Base64
      target: 'modules',
      assetsDir: 'static', // 指定生成静态资源的存放路径
      terserOptions: {
        compress: {
          keep_infinity: true,
          // 用于删除生产环境中的控制台
          drop_console: VITE_DROP_CONSOLE,
        },
      },
      // 关闭brotliSize显示可以稍微减少包装时间
      brotliSize: false,
      chunkSizeWarningLimit: 1500,
      rollupOptions: {
        // 确保外部化处理那些你不想打包进库的依赖
        output: {
          chunkFileNames: 'static/js/[name]-[hash].js',
          entryFileNames: 'static/js/[name]-[hash].js',
          assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
          manualChunks(id) {
            if (id.includes('node_modules')) {
              return id.toString().split('node_modules/')[1].split('/')[0].toString();
            }
          },
        },
      },
    },

（六）使用tailwindcss 减少css体积，方便开发

（七）vite升级至 “vite”: “^4.3.0-beta.2”,

（八）使用PWA离线存储技术

npm install vite-plugin-pwa -D
import { VitePWA } from 'vite-plugin-pwa' 
plugins: [vue(),VitePWA(), vueJsx(),visualizer({
      open:true
})]

PWA 技术的出现就是让web网页无限接近于Native 应用

1. 可以添加到主屏幕，利用manifest实现
2. 可以实现离线缓存，利用service worker实现
3. 可以发送通知，利用service worker实现

进行 npm run build 打包会生成 sw.js

综上运用到我的项目：

1. 打包体积变小

2. lighthouse评分性能分数优化至优秀的等级
   
3. 打包速度缩短20s
   

优化真的很费时又不能确保一定能有很飞跃的效果，在不断摸索中前进~~