Ensure import()ed dependencies are always dynamically imported

[fregante]

If you first import('react') and then import "react" in the same bundle, Webpack will not create a secondary chunk, it will just inline it.

In a large application, it's not easy to keep track of all the import decisions, so one optimization (deferred loading via import()) can be undone and left unnoticed forever.

We can now enforce that some dependencies are always dynamically imported:

• ban the static imports of a set of dependencies (i.e. always import canvas-confetti via import())
• remind developers to update this set of dependencies every time the linter encounters a new import("new-dependency")

Both of these are enforceable via no-restricted-syntax

Related

• First mentioned: Always name dynamic imports pixiebrix-extension#2286 (comment)
• Solution: Ensure packages are imported the same way (import "react" vs import("react")) import-js/eslint-plugin-import#2326 (comment)