Code Splitting

Current Behavior

Code splitting does not seem to be supported. An error is produced when a dynamic import is used:

Error: You must set "output.dir" instead of "output.file" when generating multi ple chunks.

Code where dynamic import is used:

        if (Platform.OS === 'web') {
          import('./webObserver').then(({ observe }) => {
            if (!ref.current) {
              return;
            }
            observe(ref.current, isVisible, setIsVisible);
          });
        } else {
          import('./nativeObserver').then(({ observe }) => {
            if (!ref.current) {
              return;
            }
            observe(ref.current as View, isVisible, setIsVisible);
          });
        }

Desired Behavior

Code Splitting should be supported.

Suggested Solution

Need to tell rollup to output to a directory instead of a file:

In tsdx.config.js:

const path = require('path');

module.exports = {
  // This function will run for each entry/format/env combination
  rollup(config) {
    const { file, ...output } = config.output;

    const folder = path
      .basename(file)
      .split('.')
      .join('-');

    return { ...config, output: { ...output, dir: `./dist/${folder}` } };
  },
};

Something like that would allow for the modules to still be outputted separately, but requires some changes after the fact (to the index.js in dist and to the package.json) in order to work.

Type files are also generated 3 times…

Who does this impact? Who is this for?

This is for anyone that needs to do dynamic imports. I’m using them because of react-native-web and react-native. I can’t use, or even mention, IntersectionObserver in any of my react native code or it go boom. Doing a dynamic import allows me to effectively only load in the code that I need at runtime. I makes it so on the web, I would not need to have things specific to react native in the bundle

Describe alternatives you’ve considered

Another thing that someone can do is to dump the outputs of tsc into a folder like dist/native/ and muck with the entry point with some platform extensions. This works too, but I don’t think this ideal as it ignores what tsdx is doing.

Additional context

I’ve noticed @sw-yx has been involved with some things related to code splitting, have you found anything?

[zachariahtimothy]

Aside from deciding where code splitting should happen. FWIW I was able to get it working by creating a tsdx.config.js and adding the following;

// Not transpiled with TypeScript or Babel, so use plain Es6/Node.js!
module.exports = {
  // This function will run for each entry/format/env combination
  rollup(config, options) {
    const { output, ...restConfig } = config;
    const { file, ...restOutput } = output;
    // Remove file ref and insert dir to support React.lazy();
    return {
      ...restConfig,
      output: {
        ...restOutput,
        dir: path.join(__dirname, 'dist'),
      },
    }; // always return a config.
  },
};````

[agilgur5]

Related to the code-splitting for multi-entry added to #367. Seems to duplicate #42, although this adds a good bit of info and an example