2

I'm using https://shoelace.style (in my Svelte project), and following the example config in shoelace docs, I added a copy() plugin to my rollup.config.js, copying it to 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
  ],
};

It works, but now the build takes really really long - upwards of 40s, including incremental rebuilds on file change. I am fairly sure the time loss isn't because it's accidentally copied every time, as the asset folder is just 6M.

So, I suppose there's some tree-shaking and/or optimizations going on? Is there way to exclude the folder from rollup processing - or to troubleshoot/profile the bundling process anyhow?

(If necessary, I can also post the rest of the config; but it's otherwise standard new app template obtained by npx degit sveltejs/template and adding/removing the copy plugin made all the difference.)

Tomáš M.
  • 752
  • 7
  • 24

2 Answers2

1

The issue turned out to be in the rollup-plugin-copy. Even setting copyOnce: true did not change the behavior, but setting it so that it only copies at the last possible opportunity - the closeBundle hook fixed my problem.

    copy({
      copyOnce: true, // ???
      hook: "closeBundle",
      targets: [
        {
          src: path.resolve(
            __dirname,
            "node_modules/@shoelace-style/shoelace/dist/assets"
          ),
          dest: path.resolve(__dirname, "public/vendor/shoelace"),
        },
      ],
    }),
Tomáš M.
  • 752
  • 7
  • 24
0

I'm using svelte with codeigniter as well and there is a simpler way to include your css framework:

  1. List item add the stylesheet to the view (layout) header and the script to its footer just above the build of svelte's script file (if you are going to use shoelace in the whole project).
  2. add both to <svelte:header></svelte:header> if you want to target only one page (even though you can also do that from the controller before loading the view to target certain pages).
  3. you can add it by installing npm i svelte-preprocess node-scss then include the scss file of you css framework and just inport the js file (and also you can do that using your global stylesheet using scss).
Sherif Salah
  • 2,085
  • 2
  • 9
  • 21
  • Thanks for the suggestion! Unfortunately, this doesn't help, as this is not what I'm trying to do. I'm already including the CSS framework via my bundler; the copy step from my question is necessary so that the framework has the additional assets (icons) it needs. – Tomáš M. Nov 07 '21 at 20:56
  • @TomášM. Whenever i use sass with svelte it becomes very slow and didn't find any solution for this problem as there is not native support for that in svelte. that's why i include most of the global css outside of svelte itself. Good luck fixing your problem. – Sherif Salah Nov 07 '21 at 23:41