vite-vue3 项目优化首屏加载速度

A嵌入B，B加载速度太慢了，需要4s+，需优化：
B系统技术栈： vue3 + vite
优化结果如下，上下对比还有有差距的：

一、先处理： 首屏加载的文件——先优化文件大

step1： 安装可视化插件 rollup-plugin-visualizer；

viteconfig.js

export default defineConfig({
  base: process.env.PUBLIC_PATH || '/pomp-budget/',
  plugins: [vue(),
     visualizer({
       open: true,
       gzipSize: true,
       brotliSize: true,
     })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('src', import.meta.url)),
    },
  },
  server: {
    proxy: {
    },
  },
  build: {
    outDir: 'dist',
    minify: true,
    chunkSizeWarningLimit: 5000,
    assetsInlineLimit: 1024 * 1024 * 10,
    cssCodeSplit: false,
    sourcemap: process.env.NODE_ENV === 'development' ? true : false,
    rollupOptions: {
      plugins: [],
      output: {
        // Static resource classification and packaging
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js',
        assetFileNames: 'assets/[ext]/[name]-[hash].[ext]',
      },
    },
  },
})

step2： 查看报告

npm run build 后会自动打开报告 （即 vite build）
根据报告查看具体那些占用内存大；

目前看出lodash文件较大

step3: 根据报告优化

1. lodash换成lodash-es, lodash-es支持treeSharking
2. 存在moment和dayjs两个插件功能重复，选择性使用dayjs

二、再处理： 首屏加载的文件——再优化文件多

可以看出系统在加载时，首屏加载了157个文件，chrome请求线程最多一次性6个加载，如此导致的加载排队，是首屏加载慢的主要原因

step1: 观察build配置发现以前的build完全没考虑打包，按照如下调整：

step2: 再执行vite preview，加载文件减少到100个，查看前后对比，相当明显~

step3: 还没完：100个文件也是多的，也是需要处理减少的，因为同一路由文件没有进行合包处理，所以每个组件都是最小化原子，这是在生产上不期望的——但我不会优化了，哈哈...拜拜,这速度也满足要求了

三、业务优化

主要考虑优化点：

1. 重复加载的接口
2. 阻塞加载的接口