🎉基于Vite 的前端首屏加载优化实践 ​

import { createApp } from 'vue'
import XXXComponent from 'XXXComponent'

// 全局加载后，不需要在组件中显式导入
createApp().use(XXXComponent)

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import Components from 'unplugin-vue-components/vite'

export default defineConfig(() => {
    return {
        plugin: [
          AutoImport({
            resolvers: [VantResolver(), ElementPlusResolver()]
          }),
          lazyImport({
            resolvers: [
              VxeResolver({ libraryName: 'vxe-table' }),
              VxeResolver({
                libraryName: 'vxe-pc-ui'
              })
            ]
          }),
          Components({
            resolvers: [VantResolver(), ElementPlusResolver()]
          }),
        ]
    }
})

import { createMemoryHistory, createRouter } from 'vue-router'
import HomeView from './HomeView.vue'
import AboutView from './AboutView.vue'

const routes = [
    { path: '/', component: HomeView },
    { path: '/about', component: AboutView },
]
const router = createRouter({
    history: createMemoryHistory(), routes,
})

import { createApp } from 'vue'
import router from '@/router'

createApp().use(router)

import { createMemoryHistory, createRouter } from 'vue-router'


const routes = [
    { path: '/', component: () => import('./HomeView.vue') },
    { path: '/about', component: () => import('./AboutView.vue') },
]
const router = createRouter({
    history: createMemoryHistory(), routes,
})

import viteCompression from 'vite-plugin-compression';
export default defineConfig(async ({ mode }) => {
    return {
        plugins: [viteCompression(
            verbose: true, // 打印压缩信息
            disable: false, // 禁用压缩
            threshold: 1024 * 200, // 200k 以上的文件进行压缩
            algorithm: 'gzip', // 使用 gzip 算法
            deleteOriginFile: false, // 压缩后删除源文件
            filter: (fileName) => {
               // html 文件和 svg 文件不压缩
              return !fileName.endsWith('html') && !fileName.endsWith('svg')
            }
        )],
    };
});

import { visualizer } from 'rollup-plugin-visualizer'

export default defineConfig(async ({ mode }) => {
        return {
            plugin: [
                  // 打包文件大小可视化插件，可对打包内容进行分析，找出大文件进行拆包
                  visualizer({
                    gzipSize: true,
                    brotliSize: true,
                    emitFile: true,
                    filename: 'report.html', //分析图生成的文件名
                    open: true //如果存在本地服务端口，将在打包后自动展示
                  }),
            ]
        }
    }
})

export default defineConfig(async ({ mode }) => {
  const env = loadEnv(mode, process.cwd())
  const { chunkSplitPlugin } = await import('vite-plugin-chunk-split')
  
  return {
      plugin: [
            chunkSplitPlugin({
                // 对不经常变更的外部依赖库拆分到单独的打包文件中，避免vite默认打包方式造成的单个打包文件过大
                strategy: 'default',
                customSplitting: {
                  axios: [/axios/],
                  lodash: [/lodash-es/, /lodash/],
                  dayjs: [/dayjs/],
                  'pinyin-pro': [/pinyin-pro/],
                  'oidc-client': [/oidc-client/],
                  opentelemetry: [/@opentelemetry/],
                  'pdfjs-dist': [/pdfjs-dist/],
                  vxe: [/vxe-pc-ui/, /vxe-table/]
                }
              }),
          ]
      }
  })

import viteImagemin from 'vite-plugin-imagemin'

export default defineConfig(() => {
    return {
        plugin: [
          viteImagemin({
            gifsicle: {
              optimizationLevel: 7,
              interlaced: false
            },
            optipng: {
              optimizationLevel: 6
            },
            mozjpeg: {
              quality: 20
            },
            pngquant: {
              quality: [0.8, 0.9],
              speed: 4
            },
            svgo: {
              plugins: [
                {
                  name: 'removeViewBox'
                },
                {
                  name: 'removeEmptyAttrs',
                  active: false
                }
              ]
            }
          }),
        ]
    }
})