在第 3 方库中复制后捆绑速度较慢 rollup.js

Question

我正在使用 https://shoelace.style (in my Svelte project), and following the example config in shoelace docs，我添加了一个 copy() 插件到我的 rollup.config.js，将其复制到 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 秒，包括文件更改时的增量重建。我很确定时间损失不是因为它每次都被不小心复制了，因为资产文件夹只有6M。

所以，我想正在进行一些 tree-shaking and/or 优化？有没有办法从汇总处理中排除文件夹 - 或者 troubleshoot/profile 捆绑过程？

（如有必要，我也可以 post 配置的其余部分；但它是通过 npx degit sveltejs/template 和 adding/removing 获得的标准新应用程序模板，复制插件使一切变得不同.)

Answer 1

我也将 svelte 与 codeigniter 结合使用，并且有一种更简单的方法来包含您的 css 框架：

列表项将样式表添加到视图（布局）页眉，将脚本添加到它的页脚，就在构建 svelte 脚本文件的正上方（如果您要在整个项目中使用鞋带）。
如果您只想定位一个页面，请将两者都添加到 <svelte:header></svelte:header>（即使您也可以在加载视图以定位特定页面之前从控制器执行此操作）。
你可以通过安装 npm i svelte-preprocess node-scss 添加它，然后包含你的 css 框架的 scss 文件，然后只导入 js 文件（你也可以使用你的全局使用 scss).

Answer 2

原来问题出在 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"),
        },
      ],
    }),

在第 3 方库中复制后捆绑速度较慢 rollup.js

Slow rollup.js bundling after copying in a 3rd-party library

rollupjs

svelte

shoelace