chunks.ts 1.4 KB

1234567891011121314151617181920212223242526272829303132333435
  1. import type { Plugin } from 'vite';
  2. /**
  3. * vendor 分包策略。CSR 与 SSG 期望的分组一致,但注入方式因构建环境不同而分两处
  4. * (SSG 经 clientChunksPlugin 注入 client 环境,CSR 直接写 build.rollupOptions),
  5. * 故把分组表抽为单一常量,两处共用,避免改一处漏改另一处。
  6. */
  7. export const VENDOR_CHUNKS = {
  8. 'react-vendor': ['react', 'react-dom', 'react-router-dom'],
  9. 'antd-vendor': ['antd', '@ant-design/icons'],
  10. 'utils-vendor': ['lodash-es', 'ramda'],
  11. 'i18n-vendor': ['i18next', 'react-i18next', 'i18next-browser-languagedetector'],
  12. };
  13. /**
  14. * vendor 分包仅注入客户端构建环境。
  15. * framework(SSG)模式下 Vite 分 client / ssr 两个环境构建,通过 configEnvironment 按环境名注入 manualChunks,
  16. * 避免 server 构建把 external 的 react 纳入分包而报错(EXTERNAL_MODULES_CANNOT_BE_INCLUDED_IN_MANUAL_CHUNKS)。
  17. * 仅 SSG 需要此插件;CSR 单环境构建,分包直接写在 build.rollupOptions 里。
  18. */
  19. export const clientChunksPlugin: Plugin = {
  20. name: 'client-manual-chunks',
  21. configEnvironment(name: string) {
  22. if (name !== 'client') return;
  23. return {
  24. build: {
  25. rollupOptions: {
  26. output: {
  27. manualChunks: VENDOR_CHUNKS,
  28. },
  29. },
  30. },
  31. };
  32. },
  33. };