-
-
Notifications
You must be signed in to change notification settings - Fork 8k
Closed
Labels
Description
Describe the bug
Vite generates unreasonably small extra chunks even for modules that are not dynamically imported anywhere.
In the actual repository we are working on, using CRA we had ~150 chunks whereas after migrating to Vite the number of chunks has significantly increased to ~230, many of which are <1kb.
This is a minimal reproduction of the issue: code sandbox link
The following vite config is used to reproduce the issue
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
export default () => {
return defineConfig({
plugins: [react()],
build: {
minify: "terser",
cssCodeSplit: false,
assetsInlineLimit: Infinity,
rollupOptions: {
output: {
experimentalMinChunkSize: Infinity,
entryFileNames: `static/js/[name].[hash].js`,
chunkFileNames: `static/js/[name].[hash].js`,
assetFileNames: "static/media/[name].[hash][extname]",
},
},
},
});
};
In the reproduced example we expect 4 chunks, (index + 3 dynamic imports), however an extra chunk for useConsole is generated which is undesirable. In the actual repository we are working on, ~80 such extra chunks are generated.
$ vite build
vite v4.5.0 building for production...
✓ 50 modules transformed.
Initially, there are
5 chunks, of which
5 are below minChunkSize.
After merging chunks, there are
5 chunks, of which
5 are below minChunkSize.
dist/index.html 1.65 kB │ gzip: 0.87 kB
dist/static/media/style.6aed1f6e.css 4.96 kB │ gzip: 1.30 kB
dist/static/js/useConsole.738d52e1.js 0.06 kB │ gzip: 0.08 kB
dist/static/js/grid.84ff293e.js 4.59 kB │ gzip: 1.58 kB
dist/static/js/filter.e992996a.js 4.72 kB │ gzip: 1.84 kB
dist/static/js/header.3fe09cb9.js 58.85 kB │ gzip: 41.83 kB
dist/static/js/index.44d318cb.js 143.81 kB │ gzip: 46.33 kB
✓ built in 4.31s
Done in 4.73s.
Reproduction
https://codesandbox.io/p/devbox/airbnb-c68kj8
Steps to reproduce
Run yarn install followed by yarn build
System Info
System:
OS: Linux 6.1 Debian GNU/Linux 11 (bullseye) 11 (bullseye)
CPU: (2) x64 AMD EPYC
Memory: 639.66 MB / 2.01 GB
Container: Yes
Shell: 5.1.4 - /bin/bash
Binaries:
Node: 16.17.0 - /usr/local/bin/node
Yarn: 1.22.19 - /usr/local/bin/yarn
npm: 8.15.0 - /usr/local/bin/npm
pnpm: 7.1.0 - /usr/local/bin/pnpm
Watchman: 20220528.183901.0 - /usr/local/bin/watchman
npmPackages:
@vitejs/plugin-react: ^4.2.0 => 4.2.0
vite: ^4.0.0 => 4.5.0Used Package Manager
yarn
Logs
Click to expand!
$ vite build --debug
vite:config bundled config file loaded in 57.76ms +0ms
vite:config using resolved config: {
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:watch-package-data',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:react-babel',
vite:config 'vite:react-refresh',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:reporter',
vite:config 'vite:load-fallback'
vite:config ],
vite:config build: {
vite:config target: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config cssTarget: [ 'es2020', 'edge88', 'firefox78', 'chrome87', 'safari14' ],
vite:config outDir: 'dist',
vite:config assetsDir: 'assets',
vite:config assetsInlineLimit: Infinity,
vite:config cssCodeSplit: false,
vite:config sourcemap: false,
vite:config rollupOptions: { output: [Object], onwarn: [Function: onwarn] },
vite:config minify: 'terser',
vite:config terserOptions: {},
vite:config write: true,
vite:config emptyOutDir: null,
vite:config copyPublicDir: true,
vite:config manifest: false,
vite:config lib: false,
vite:config ssr: false,
vite:config ssrManifest: false,
vite:config ssrEmitAssets: false,
vite:config reportCompressedSize: true,
vite:config chunkSizeWarningLimit: 500,
vite:config watch: null,
vite:config commonjsOptions: { include: [Array], extensions: [Array] },
vite:config dynamicImportVarsOptions: { warnOnError: true, exclude: [Array] },
vite:config modulePreload: { polyfill: true },
vite:config cssMinify: true
vite:config },
vite:config optimizeDeps: {
vite:config disabled: 'build',
vite:config force: undefined,
vite:config esbuildOptions: { preserveSymlinks: false, jsx: 'automatic' },
vite:config include: [ 'react', 'react/jsx-dev-runtime', 'react/jsx-runtime' ]
vite:config },
vite:config esbuild: { jsxDev: false, jsx: 'automatic', jsxImportSource: undefined },
vite:config resolve: {
vite:config mainFields: [ 'module', 'jsnext:main', 'jsnext' ],
vite:config browserField: true,
vite:config conditions: [],
vite:config extensions: [
vite:config '.mjs', '.js',
vite:config '.mts', '.ts',
vite:config '.jsx', '.tsx',
vite:config '.json'
vite:config ],
vite:config dedupe: [ 'react', 'react-dom' ],
vite:config preserveSymlinks: false,
vite:config alias: [ [Object], [Object] ]
vite:config },
vite:config configFile: '/project/home/pratham.nayak/workspace/vite.config.js',
vite:config configFileDependencies: [ '/project/home/pratham.nayak/workspace/vite.config.js' ],
vite:config inlineConfig: {
vite:config root: undefined,
vite:config base: undefined,
vite:config mode: undefined,
vite:config configFile: undefined,
vite:config logLevel: undefined,
vite:config clearScreen: undefined,
vite:config optimizeDeps: { force: undefined },
vite:config build: {}
vite:config },
vite:config root: '/project/home/pratham.nayak/workspace',
vite:config base: '/',
vite:config rawBase: '/',
vite:config publicDir: '/project/home/pratham.nayak/workspace/public',
vite:config cacheDir: '/project/home/pratham.nayak/workspace/node_modules/.vite',
vite:config command: 'build',
vite:config mode: 'production',
vite:config ssr: {
vite:config format: 'esm',
vite:config target: 'node',
vite:config optimizeDeps: { disabled: true, esbuildOptions: [Object] }
vite:config },
vite:config isWorker: false,
vite:config mainConfig: null,
vite:config isProduction: true,
vite:config css: undefined,
vite:config server: {
vite:config preTransformRequests: true,
vite:config sourcemapIgnoreList: [Function: isInNodeModules],
vite:config middlewareMode: false,
vite:config fs: { strict: true, allow: [Array], deny: [Array] }
vite:config },
vite:config preview: {
vite:config port: undefined,
vite:config strictPort: undefined,
vite:config host: undefined,
vite:config https: undefined,
vite:config open: undefined,
vite:config proxy: undefined,
vite:config cors: undefined,
vite:config headers: undefined
vite:config },
vite:config envDir: '/project/home/pratham.nayak/workspace',
vite:config env: { BASE_URL: '/', MODE: 'production', DEV: false, PROD: true },
vite:config assetsInclude: [Function: assetsInclude],
vite:config logger: {
vite:config hasWarned: false,
vite:config info: [Function: info],
vite:config warn: [Function: warn],
vite:config warnOnce: [Function: warnOnce],
vite:config error: [Function: error],
vite:config clearScreen: [Function: clearScreen],
vite:config hasErrorLogged: [Function: hasErrorLogged]
vite:config },
vite:config packageCache: Map(1) {
vite:config 'fnpd_/project/home/pratham.nayak/workspace' => {
vite:config dir: '/project/home/pratham.nayak/workspace',
vite:config data: [Object],
vite:config hasSideEffects: [Function: hasSideEffects],
vite:config webResolvedImports: {},
vite:config nodeResolvedImports: {},
vite:config setResolvedCache: [Function: setResolvedCache],
vite:config getResolvedCache: [Function: getResolvedCache]
vite:config },
vite:config set: [Function (anonymous)]
vite:config },
vite:config createResolver: [Function: createResolver],
vite:config worker: {
vite:config format: 'iife',
vite:config plugins: [
vite:config 'vite:build-metadata',
vite:config 'vite:watch-package-data',
vite:config 'vite:pre-alias',
vite:config 'alias',
vite:config 'vite:modulepreload-polyfill',
vite:config 'vite:resolve',
vite:config 'vite:html-inline-proxy',
vite:config 'vite:css',
vite:config 'vite:esbuild',
vite:config 'vite:json',
vite:config 'vite:wasm-helper',
vite:config 'vite:worker',
vite:config 'vite:asset',
vite:config 'vite:wasm-fallback',
vite:config 'vite:define',
vite:config 'vite:css-post',
vite:config 'vite:build-html',
vite:config 'vite:worker-import-meta-url',
vite:config 'vite:asset-import-meta-url',
vite:config 'vite:force-systemjs-wrap-complete',
vite:config 'commonjs',
vite:config 'vite:data-uri',
vite:config 'vite:worker-post',
vite:config 'vite:dynamic-import-vars',
vite:config 'vite:import-glob',
vite:config 'vite:build-import-analysis',
vite:config 'vite:esbuild-transpile',
vite:config 'vite:terser',
vite:config 'vite:load-fallback'
vite:config ],
vite:config rollupOptions: {},
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config },
vite:config appType: 'spa',
vite:config experimental: { importGlobRestoreExtension: false, hmrPartialAccept: false },
vite:config getSortedPlugins: [Function: getSortedPlugins],
vite:config getSortedPluginHooks: [Function: getSortedPluginHooks]
vite:config } +25ms
vite v4.5.0 building for production...
vite:esbuild 24.88ms tsconfck init /project/home/pratham.nayak/workspace +0ms
✓ 50 modules transformed.
Initially, there are
5 chunks, of which
5 are below minChunkSize.
After merging chunks, there are
5 chunks, of which
5 are below minChunkSize.
dist/index.html 1.65 kB │ gzip: 0.87 kB
dist/static/media/style.6aed1f6e.css 4.96 kB │ gzip: 1.30 kB
dist/static/js/useConsole.738d52e1.js 0.06 kB │ gzip: 0.08 kB
dist/static/js/grid.84ff293e.js 4.59 kB │ gzip: 1.58 kB
dist/static/js/filter.e992996a.js 4.72 kB │ gzip: 1.84 kB
dist/static/js/header.3fe09cb9.js 58.85 kB │ gzip: 41.83 kB
dist/static/js/index.44d318cb.js 143.81 kB │ gzip: 46.33 kB
✓ built in 3.49s
Done in 3.88s.Validations
- Follow our Code of Conduct
- Read the Contributing Guidelines.
- Read the docs.
- Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
- Make sure this is a Vite issue and not a framework-specific issue. For example, if it's a Vue SFC related bug, it should likely be reported to vuejs/core instead.
- Check that this is a concrete bug. For Q&A open a GitHub Discussion or join our Discord Chat Server.
- The provided reproduction is a minimal reproducible example of the bug.
Reactions are currently unavailable