在第三方库中复制后缓慢地进行rollup.js捆绑

Question

我正在使用https://shoelace.style (在我的Svelte项目中)，在鞋带文档中的示例配置之后，我在rollup.config.js中添加了一个copy()插件，并将其复制到public/vendor/shoelace

export default {
  // SNIP
  plugins: [
    // SNIP
    copy({
      targets: [
        {
          src: path.resolve(
            __dirname,
            "node_modules/@shoelace-style/shoelace/dist/assets"
          ),
          dest: path.resolve(__dirname, "public/vendor/shoelace"),
        },
      ],
    }),
    // SNIP
  ],
};

它可以工作，但是现在构建需要非常长的40多岁，包括在文件更改上的增量重建。我相当肯定，时间损失并不是因为每次都是不小心复制的，因为资产文件夹只有600万。

那么，我想会有一些树抖动和/或优化正在进行吗？是否有方法将文件夹从汇总处理中排除?还是以任何方式排除/分析捆绑过程？

(如果有必要的话，我也可以发布配置的其余部分；但是它是npx degit sveltejs/template获得的标准新应用程序模板，添加/删除复制插件就产生了所有的不同。)

Answer 1

事实证明，这个问题发生在rollup-plugin-copy上。即使是设置copyOnce: true也没有改变行为，而是将其设置为只在最后一个可能的机会时复制-- closeBundle钩子解决了我的问题。

    copy({
      copyOnce: true, // ???
      hook: "closeBundle",
      targets: [
        {
          src: path.resolve(
            __dirname,
            "node_modules/@shoelace-style/shoelace/dist/assets"
          ),
          dest: path.resolve(__dirname, "public/vendor/shoelace"),
        },
      ],
    }),

Answer 2

我也在使用svelte和代码点火器，还有一种更简单的方法来包含您的css框架：

1. 列表项将样式表添加到视图(布局)页眉，并将脚本添加到它的页脚，就在svelte脚本文件构建的上方(如果要在整个项目中使用鞋带)。
2. 如果希望只针对一个页面(即使在加载视图以特定页面为目标之前也可以从控制器中添加这两种方法)，则将两者添加到<svelte:header></svelte:header>中。
3. 您可以通过安装npm i svelte-preprocess node-scss来添加它，然后包含css框架的scss文件，只需导入js文件(还可以使用使用scss的全局样式表来实现这一点)。