diff --git a/packages/vite/src/node/build.ts b/packages/vite/src/node/build.ts index dfaab8362784c5..b9bf8993555ef4 100644 --- a/packages/vite/src/node/build.ts +++ b/packages/vite/src/node/build.ts @@ -244,6 +244,12 @@ export interface BuildOptions { * @default null */ watch?: WatcherOptions | null + /** + * Whether to log warnings emitted by ineffective dynamic imports. + * Ineffective dynamic imports are imports that do not split chunks (#12850). + * @default false + */ + warnExternalChunkRender: boolean } export interface LibraryOptions { @@ -350,6 +356,7 @@ export function resolveBuildOptions( reportCompressedSize: true, chunkSizeWarningLimit: 500, watch: null, + warnExternalChunkRender: false, } const userBuildOptions = raw diff --git a/packages/vite/src/node/config.ts b/packages/vite/src/node/config.ts index 8c83bf787896ea..74353f7fd09d87 100644 --- a/packages/vite/src/node/config.ts +++ b/packages/vite/src/node/config.ts @@ -482,7 +482,7 @@ export async function resolveConfig( optimizeDeps: { disabled: false }, ssr: { optimizeDeps: { disabled: false } }, }) - config.build ??= {} + config.build ??= {} as BuildOptions config.build.commonjsOptions = { include: [] } } diff --git a/packages/vite/src/node/plugins/reporter.ts b/packages/vite/src/node/plugins/reporter.ts index d031caec90a650..a50c56ce503fe7 100644 --- a/packages/vite/src/node/plugins/reporter.ts +++ b/packages/vite/src/node/plugins/reporter.ts @@ -122,22 +122,22 @@ export function buildReporterPlugin(config: ResolvedConfig): Plugin { // When a dynamic importer shares a chunk with the imported module, // warn that the dynamic imported module will not be moved to another chunk (#12850). if (hasStaticImport && hasDynamicImport) { - // Check if the module is imported by an external dependency, because - // warning ineffective dynamic import of an external dependency is not helpful. - const isExternalDependency = (module: string) => - module.includes('/node_modules/') - const isInTheSameChunk = (module: string) => - chunk.moduleIds.includes(module) - const detectedDirectIneffectiveDynamicImport = - module.dynamicImporters.some( - (m) => !isExternalDependency(m) && isInTheSameChunk(m), - ) + const warningCondition = (module: string) => { + const isExternalDependency = module.includes('/node_modules/') + const isInSameChunk = chunk.moduleIds.includes(module) + if (!isInSameChunk) return false + if (!isExternalDependency) return true + return config.build.warnExternalChunkRender + } + + const detectedIneffectiveDynamicImport = + module.dynamicImporters.some(warningCondition) // Filter out the intersection of dynamic importers and sibling modules in // the same chunk. The intersecting dynamic importers' dynamic import is not // expected to work. Note we're only detecting the direct ineffective // dynamic import here. - if (detectedDirectIneffectiveDynamicImport) { + if (detectedIneffectiveDynamicImport) { this.warn( `\n(!) ${ module.id