如何避免 Rollup 入口点之间的代码重复？

Question

我想配置汇总以在输入时获取一堆文件并在 dist 中生成一堆文件，这些文件 在它们之间共享一些通用代码。

这是我使用的汇总配置：

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,
  },
];

此设置的问题在于，如果 a.ts 和 b.ts 都依赖于某些代码，则此通用代码会被捆绑到每个输出文件中，从而不必要地增加了捆绑包的大小。

因为 output.format 是 esm（因此，imports 在输出中可用），我宁愿希望汇总将共享代码拆分为 2 个文件一个单独的块，然后使两个文件 import 成为通用代码 (which seems to be the thing rollup does by default anyway).

我假设问题出在 nodeResolve 或 commonjs 调用附近，但是，我希望捆绑我的依赖项。我只是不想让它们重复。

如何优化输出？这是一个 reproduction 来可视化它（包括 dist）。

Answer 1

通过返回一个对象数组，您可以向 rollup 指定您想要 independent 包。如果您只想生成多个文件（这正是我的情况），您只需将 input 指定为一个对象即可。

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: {
    a: './src/a.ts',
    b: './src/b.ts',
  },
  output: {
    dir: 'dist',
    format: 'esm',
    sourcemap: true,
  },
  plugins,
};

如何避免 Rollup 入口点之间的代码重复？

How to avoid code duplication between entry points in Rollup?

javascript

typescript

optimization

bundling-and-minification

rollupjs