前端vite分包-简介

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
import VueDevTools from 'vite-plugin-vue-devtools'
import UnoCSS from 'unocss/vite'

// https://vitejs.dev/config/
export default defineConfig(() => {
  const isProd = process.env.NODE_ENV === 'production'
  return {
    plugins: [vue(), vueJsx(), UnoCSS(), ...(!isProd ? [VueDevTools()] : [])],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      },
      // 避免出现多个 vue 实例导致的潜在问题
      dedupe: ['vue']
    },
    css: {
      preprocessorOptions: {
        less: {
          modifyVars: {
            'primary-color': '#165DFF',
            'error-color': '#f5222d'
          },
          javascriptEnabled: true
        }
      }
    },
    define: {
      __VUE_OPTIONS_API__: true,
      __VUE_PROD_DEVTOOLS__: false
    },
    esbuild: {
      // 仅在生产构建时移除调试与 console
      drop: isProd ? ['debugger'] : [],
      pure: isProd ? ['console.log', 'console.debug', 'console.info', 'console.warn'] : [],
      legalComments: 'none'
    },
    build: {
      target: 'es2019',
      minify: 'esbuild',
      cssMinify: 'esbuild',
      cssCodeSplit: true,
      assetsInlineLimit: 4096,
      reportCompressedSize: false,
      sourcemap: !isProd,
      chunkSizeWarningLimit: 2000,
      rollupOptions: {
        output: {
          manualChunks(id) {
            if (id.includes('node_modules')) {
              const parts = id.split('node_modules/')[1].split('/')
              const scope = parts[0]
              const name = scope.startsWith('@') ? `${scope}-${(parts[1] || 'pkg')}` : scope
              return `vendor-${name}`
            }
          },
          entryFileNames: 'assets/[name]-[hash].js',
          chunkFileNames: 'assets/[name]-[hash].js',
          assetFileNames: 'assets/[name]-[hash][extname]'
        }
      }
    },
    server: {
      port: 9999,
      open: true,
      host: true,
      fs: {
        strict: true
      },
      proxy: {
          ... // 自己配置项目本地代理
      }
    },
    preview: {
      port: 4173,
      host: true,
      open: false,
      strictPort: true,
      headers: {
        'Cache-Control': 'public, max-age=31536000, immutable'
      }
    }
  }
})

以下是我自己的项目打包后的dist包详情，引入的第三方包都各自拆分为包，业务代码在index.js中。这样以后再有业务更新时 只需要更新index，不需要更新第三方包，可以读取缓存，提升加载速度