marking libs as externals for bundle(?)

[ljosberinn]

hi,

curious if what has been done here in the preact example:
https://github.com/vercel/next.js/blob/canary/examples/using-preact/next.config.js#L11

would also work for e.g. component libraries. commonly, their code is re-used across at least multiple pages if not all, so it wouldn't make lots of sense to duplicate that code.

however although this optimization seems easy to execute considering there's not a lot of code to alter, in my tests it always led to more or less the opposite: the entire component library is included in all bundles individually.

so my assumption is that this optimization just ensures that the entirety of matching modules will be marked as externals, without any tree shaking happening, which would already defeat the point of doing this for component libs as you basically never use the entirety anyways.

ideally, I'd like to see this:

• / uses Button and Link
• /about uses Button and Heading

thus no code for Button, Link or Heading is within a page bundle, but only the required code for those 3 components is within a shared bundle. this comes at the cost that a user initially has to load components he doesn't even use yet, which I'd consider a worthy tradeoff that has to be evaluated on a per-project basis. if your landing page is very simple, you might not want to download all the components hidden behind a login, e.g.

any help here is appreciated; if this is possible, it will be included in the docs for @chakra-ui v1

[ljosberinn]

After some further tests, it looks like the correct approach would be overwriting cacheGroup.framework (alternatively, renaming it):

const splitChunks = config.optimization && config.optimization.splitChunks;

const frameworkyModudules = ["@chakra-ui"];

if (splitChunks) {
  const cacheGroups = splitChunks.cacheGroups;

  if (cacheGroups.framework) {
    const test = new RegExp(
      cacheGroups.framework.test
        .toString()
        .slice(1, -1)
        .replace(/\((?!\?)(.+?)\)/, (_, b) => {
          const items = b.split("|");

          frameworkyModudules.forEach((module) => items.push(module));

          return `(${items.join("|")})`;
        })
    );

    cacheGroups.framework = Object.assign({}, cacheGroups.framework, {
      test,
    });
  }
}

if (isServer) {
  config.externals.push(/^(@chakra-ui)([\\/]|$)/);
}

Although this builds fine and has the expected bundle size changes, it will break in prod; see chakra-ui/chakra-ui#1841