My goal is to use rollup to process a group of input files and generate multiple output files in the dist directory that all have some common code shared between them.
Below is my current rollup configuration:
import path from 'path';
import pathsTransformer from 'ts-transform-paths';
import alias from '@rollup/plugin-alias';
import commonjs from '@rollup/plugin-commonjs';
import { nodeResolve } from '@rollup/plugin-node-resolve';
import typescript from 'rollup-plugin-typescript2';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
const plugins = [
peerDepsExternal(),
alias({
entries: [
{ find: '@', replacement: path.join(__dirname, '/src') },
{ find: '$root', replacement: __dirname },
],
}),
nodeResolve(),
typescript({
transformers: [() => pathsTransformer()],
}),
commonjs({
extensions: ['.js', '.ts'],
}),
];
export default [
{
input: './src/a.ts',
output: {
file: 'dist/a.js',
format: 'esm',
sourcemap: true,
},
plugins,
},
{
input: './src/b.ts',
output: {
file: 'dist/b.js',
format: 'esm',
sourcemap: true,
},
plugins,
},
];
The issue I am facing with this setup is that when both a.ts and b.ts rely on the same code, that common code gets bundled into each output file, needlessly increasing the bundle size.
Since the output.format is esm where imports are available in the output, I would expect rollup to separate the shared code into a distinct chunk and then have both files import that common code (which appears to be the default behavior of rollup).
I suspect the problem lies within the nodeResolve or commonjs calls, but I still want my dependencies to be bundled, just without duplicating them.
How can I optimize my output? Here's a link to a repository for demonstration (with the 'dist' folder included).