Vite/Rollup/webpack warning: '(!) Some chunks are larger than 500 kB after minification' - how do I split a large JavaScript bundle with dynamic import()?

Cause: the build puts too much code into one output file. Vite warns when a chunk exceeds build.chunkSizeWarningLimit (default 500 kB, measured before compression). Large first-load bundles slow down page start, especially on mobile. Typical culprits are whole UI/charting/editor libraries and all routes shipped upfront. Fix: 1. Lazy-load routes and heavy features with dynamic import(). It returns a promise for the module, the module is fetched only when that code runs, and bundlers turn each import() into a separate chunk. Example with a router: const Settings = () => import("./pages/Settings.js"); in React use React.lazy(() => import("./Settings")) inside Suspense. 2. Import only what you use (named imports from libraries that support tree shaking, smaller alternatives for large libraries). Static imports are still right for code needed at start. 3. Webpack: dynamic imports split automatically; add optimization.splitChunks: { chunks: "all" } to extract shared dependencies into common chunks. Vite: chunking is controlled in the build options (rollupOptions/rolldownOptions output settings, depending on your Vite version); check your framework's guidance before hand-tuning chunk groups. 4. Handle load failures: a chunk request can fail after a new deployment removed old files. Webpack throws ChunkLoadError; Vite emits a vite:preloadError event you can use to reload. Serve index.html with Cache-Control: no-cache. 5. Inspect what is large with a bundle visualizer plugin for your bundler before deciding what to split. 6. Raising chunkSizeWarningLimit only hides the message; do it only when a large chunk is intentional. Verify: rebuild; the build output lists several smaller chunks, the warning disappears or shrinks, and DevTools > Network shows the extra chunks loading only when you open the matching route or feature. Sources: https://vite.dev/config/build-options.html https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/import https://webpack.js.org/guides/code-splitting/ https://vite.dev/guide/build.html