动态导入 JSON 导致 index.js 文件很大答案

【问题标题】：Dynamic import of JSON leads to large index.js files动态导入 JSON 导致 index.js 文件很大
【发布时间】：2022-11-29 10:50:57
【问题描述】：

我有一个 vite SPA 并使用动态导入来加载我的 json 文件。由于我需要加载大量非常大的 json，因此 /dist 中的 index.js 文件对于生产来说变得太大了。

动态导入这些 json 文件但仍保留小块的最佳方法是什么？我可以将 json 文件导入为自己的块，类似于图像和视频吗？

这是我的 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(),
  ],
})

【问题讨论】：

标签： javascript json vite

【解决方案1】：

你可以试试这个配置：

https://vitejs.dev/config/build-options.html#build-chunksizewarninglimit

【讨论】：