Consider removing babel-plugin-inline-json-import

[kevin940726]

I found out by accident that babel-plugin-inline-json-import doesn't tree-shake well in the generated output.

Every time we import a json file, it will inline the full content of the JSON file again in the bundle. This output won't be deduped and will end up in the final minified bundle as well. Destructuring also doesn't help.

Take this as an example:

gutenberg/packages/block-library/src/list-item/utils.js

Lines 9 to 11 in 9ee0f4b

	import { name as listItemName } from './block.json';
	import { name as listName } from '../list/block.json';
	import { name as paragraphName } from '../paragraph/block.json';

This will inline all three block.json in this utils file even after bundling with other files that have these JSON files already.

You can verify it by looking into the built file in /build/block-library/index.min.js after running npm run build. Search for $schema:"https://schemas.wp.org/trunk/block.json",apiVersion:2,name:" to find all inlined block.json files. For instance, searching for $schema:"https://schemas.wp.org/trunk/block.json",apiVersion:2,name:"core/list-item" results in four occurrences. That's one json file that gets inlined four times.

Using custom plugins also doesn't play well with modern build tools other than babel like esbuild or swc if we decide to use them in the future.

For webpack builds, it natively supports importing json files so it shouldn't be an issue. However, we need to figure out a way to handle this for package builds. My immediate solution is to just copy the json files to the build folder without processing them, and let the bundlers handle them. It will be a breaking change though. Thoughts?

[gziolo]

For instance, searching for $schema:"https://schemas.wp.org/trunk/block.json",apiVersion:2,name:"core/list-item" results in four occurrences. That's one json file that gets inlined four times.

🙈 That's a very unfortunate side-effect of the way how the custom webpack plugin works that I would never anticipate. I guess it's easy to fix in the code by proxying through a JS file, but it's counter-intuitive, and I guess something we would rather want to avoid. My only hope is that compression minimizes the impact of this issue.

We were hoping that the proposal to import JSON files as modules would reach stage 4 sooner, but instead, it got downgraded to stage 2. It's getting back to stage 3 as a revised proposal for syntax to import ES modules with assertions. The idea was that once it reaches stage 4, then browsers and Node.js implement support for it, we simply drop the Babel plugin that causes all the trouble. See the exploration from @youknowriad #34176 from August 2021.