汇总摇树

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

您需要做一些事情来从两方面实现可树的代码-构建的程序包和使用它的项目。

从您的代码片段中，我看到您尚未在汇总配置文件中添加标志@Override public void onReceive(Context context, Intent intent) { if (intent.getAction().equals("com.myapp.MY_ALARM1")) { // notification here } if (intent.getAction().equals("com.myapp.MY_ALARM2")) { // other notification here } 以防止构建输出捆绑在一起。 Webpack无法对捆绑的文件FYI进行树状握手。

preserveModules: true

在使用它的项目一侧，您必须在export default { ... preserveModules: true, ... } 中指定sideEffects-阅读doc以了解如何进行配置。除此之外，webpack中的package.json还必须具有optimization，还需要阅读文档here。

希望这会有所帮助！