使用汇总摇树答案

【问题标题】：Tree-shaking with rollup使用汇总摇树
【发布时间】：2019-08-15 18:43:33
【问题描述】：

我有一个项目，我在其中使用 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。

【问题讨论】：

标签： javascript rollup tree-shaking

【解决方案1】：

您需要做一些事情来从双方（构建的包和使用它的项目）实现 treeshakable 代码。

从您的代码 sn-p 中，我看到您没有在汇总配置文件中添加标志 preserveModules: true 以防止构建输出捆绑。 Webpack 不能 treeshake 捆绑的文件FYI。

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

在使用它的项目方面，您必须在package.json 中指定sideEffects - 阅读doc 以了解如何配置它们。除此之外，webpack 中的optimization 必须有sideEffects: true，另请阅读文档here。

希望这会有所帮助！

【讨论】：