How to minify inline json to reduce javascript bundle size
- Step 1Identify large inline JSON in your bundle — Run bundle analysis (npx webpack-bundle-analyzer or next build --analyze). Look for JSON data embedded in large modules — translation files, icon sets, and country/currency lists are common large inline JSON candidates.
- Step 2Extract and minify the JSON — Extract the JSON constant value, paste it here, and minify. Copy the minified output.
- Step 3Move large JSON to a separate file and import it — Rather than inlining large JSON as a constant, move it to a .json file and import it: import data from './data.json'. The bundler can then code-split the JSON file if it is only needed in certain routes.
- Step 4For Next.js: use dynamic import with JSON — For large JSON used only on specific pages, use dynamic import: const data = await import('./large-data.json'). Next.js code-splits this into a separate chunk that is loaded only when the page using it is visited.
Frequently asked questions
Does webpack or Rollup automatically minify JSON imported as a module?+
Webpack 5 and Rollup both process JSON imports through their JSON plugin and include the parsed module in the bundle. The TerserPlugin (webpack) minifies the resulting JavaScript including JSON object literals. JSON string literals inside template literals or string assignments are less reliably minified — extract them to separate .json files for the best bundle optimization.
How much bundle size can I save by minifying JSON constants?+
Whitespace removal saves 10-30% of JSON size before compression. After Gzip or Brotli (applied by most CDNs and hosting platforms to JavaScript bundles), the additional saving from minification is marginal. The more impactful optimization is code-splitting to defer loading the JSON to when it is actually needed.
Is the bundle data transmitted to JAD Apps?+
No. Minification runs entirely in your browser. Static data and bundle assets are never transmitted to JAD Apps servers.
Privacy first
Conversion runs locally in your browser. No file is uploaded — only metadata counters are saved for signed-in dashboard stats.