生产构建中动态导入JSON致Chunk过大的解决方案咨询

我开发了一个Vite单页应用（SPA），采用动态导入方式加载JSON文件。由于需要加载大量体积庞大的JSON文件，生产构建完成后，dist目录下的index.js文件体积过大。

请问如何在动态导入这些JSON文件的同时保持Chunk体积较小？能否像图片、视频那样，将JSON文件作为独立的带哈希值的Chunk进行动态导入？

以下是我的vite.config.js配置：

import path from 'path'
import { defineConfig } from 'vite'
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js'
import { createHtmlPlugin } from 'vite-plugin-html'
import svgr from 'vite-plugin-svgr'
import legacy from '@vitejs/plugin-legacy'
import react from '@vitejs/plugin-react'
import { name } from './package.json'

export default defineConfig({
  base: '/widgets/' + name + '/',
  server: {
    open: true, // Define a BROWSER in your .env-File to specify which browser. Defaults to Chrome. https://vitejs.dev/config/#server-open
    port: 3000,
  },
  resolve: {
    alias: {
      '@Assets': path.resolve(__dirname, 'src/assets'),
      '@Components': path.resolve(__dirname, 'src/components'),
      '@Examples': path.resolve(__dirname, 'src/examples'),
      '@Scripts': path.resolve(__dirname, 'src/scripts'),
      '@Styles': path.resolve(__dirname, 'src/assets/styles'),
      '@Cms': path.resolve(__dirname, 'src/assets/styles/cms'),
    },
  },
  css: {
    devSourcemap: true, // needed for css imported in cms template
  },
  define: {
    __DATA_PATH__: JSON.stringify(process.env.npm_package_config_dataPath),
  },
  build: {
    rollupOptions: {
      output: {
        entryFileNames: `[name].js`,
        chunkFileNames: `[name].js`,
        assetFileNames: `[name].[ext]`,
      },
    },
  },
  plugins: [
    legacy({
      polyfills: true,
    }),
    react(),
    createHtmlPlugin({
      minify: true,
      inject: {
        data: {
          title: name,
          id: name,
        },
      },
    }),
    cssInjectedByJsPlugin(),
    svgr(),
  ],
})

解决方案 #

1. 调整Rollup配置，让JSON作为独立带哈希的静态资产 #

当前配置的输出文件名没有哈希，且Vite默认会把JSON打包进JS Chunk。修改build.rollupOptions，添加哈希后缀并指定JSON为静态资产：

build: {
  rollupOptions: {
    // 标记所有JSON文件为静态资产
    assetsInclude: ['**/*.json'],
    output: {
      // 给输出文件添加哈希后缀，便于缓存管理
      entryFileNames: `[name].[hash].js`,
      chunkFileNames: `[name].[hash].js`,
      assetFileNames: `[name].[hash].[ext]`,
    },
  },
},

assetsInclude会让Vite将JSON文件当作静态资源处理，构建时直接复制到dist目录并生成带哈希的独立文件，不会打包进主JS。

2. 用正确的动态导入方式加载JSON #

动态导入时明确指定JSON类型，触发代码拆分：

// 动态加载JSON，会单独请求带哈希的JSON文件
const loadLargeData = async () => {
  const dataModule = await import('@Assets/your-large-data.json', { 
    assert: { type: 'json' } 
  });
  return dataModule.default;
};

这种方式下，JSON会被拆分为独立Chunk，仅在需要时加载，不会增大主index.js的体积。

3. 额外优化点 #

• 检查cssInjectedByJsPlugin：如果CSS体积较大，该插件会将CSS注入JS，导致Chunk增大。若无需此特性，可移除插件，让Vite单独输出CSS文件。
• 调整legacy插件：polyfills: true会引入所有polyfill，可能冗余。可指定具体需要的polyfill，比如polyfills: ['es.array.includes', 'es.promise.finally']，减少不必要的代码。

内容的提问来源于stack exchange，提问作者user8434434