javascript - 使用汇总摇树

Question

我有一个项目，我在其中使用 Rollup 捆绑了一个组件库(生成一个 bundle.esm.js 文件)。这些组件然后在另一个项目中使用，该项目生成使用这些组件的网页 - 每个页面都使用不同的组件。
问题是，无论我使用哪些组件，整个组件库总是与不同的页面包捆绑在一起，从而不必要地增加了包的大小。

这是我的汇总设置:

import resolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
import pkg from './package.json';

const extensions = [
  '.js', '.jsx', '.ts', '.tsx',
];
export default [
  {
    input: './src/base/index.ts',
    plugins: [
      peerDepsExternal(),
      resolve({ extensions }),
      babel({
        exclude: 'node_modules/**',
        extensions,
      }),
      commonjs(),
    ],
    output: [
      { file: pkg.main, format: 'cjs', sourcemap: true },
      { file: pkg.module, format: 'es', sourcemap: true },
    ],
    watch: {
      clearScreen: false,
    },
  },
];

我在 webpack 中也将“模块”设置为 false。

Answer 1

您需要做一些事情来从双方实现可摇动的代码 - 构建的包和使用它的项目。
从您的代码片段中，我看到您没有添加标志 preserveModules: true在汇总配置文件中以防止构建输出捆绑。 Webpack 不能 treeshake 捆绑的文件 FYI .

export default {
  ...
  preserveModules: true,
  ...
}

在使用它的项目一侧，您必须指定 sideEffects在 package.json - 阅读 doc知道如何配置它们。除此之外， optimization在 webpack 中必须有 sideEffects: true ，另请阅读文档 here .
希望这可以帮助!