Bundle STILL WAY too slow

[totszwai]

Re: https://github.com/developit/microbundle/issues/513

The above issue was closed stating that there would be improvements in the next release, so I switched to 0.14 today hoping that it would speed things up, but nope. :(

Command ran without raw: microbundle --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx --no-compress --format modern,cjs

Build "@blah/icons" to dist: 171 kB: index.js.gz 137 kB: index.js.br 170 kB: index.modern.js.gz 136 kB: index.modern.js.br

With raw: microbundle --raw --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx --no-compress --format modern,cjs

Build "@blah/icons" to dist: 171206 B: index.js.gz 136610 B: index.js.br 169778 B: index.modern.js.gz 136113 B: index.modern.js.br

With actually timed:

npm run microbundle-build | gnomon
   0.1361s   
   0.0006s   > @blah/icons@0.3.0 microbundle-build /home/projects/blah/packages/icons
   0.0001s   > microbundle --raw --jsx 'React.createElement' --jsxImportSource react --globals react/jsx-runtime=jsx --no-compress --format modern,cjs
 220.0267s   
   0.0002s   Build "@blah/icons" to dist:
   0.0001s        171206 B: index.js.gz
   0.0001s        136610 B: index.js.br
   0.0001s        169778 B: index.modern.js.gz
   0.1227s        136113 B: index.modern.js.br
   0.0004s   

     Total   220.2887s

[developit]

My comment in that issue was referring to a WIP Microbundle 1.0, not the 0.14 release.

170kb of JS for icons seems like a lot of JS - are you bundling SVGs into JavaScript files?

[totszwai]

My comment in that issue was referring to a WIP Microbundle 1.0, not the 0.14 release.

Oh. :(

are you bundling SVGs into JavaScript files

Yes. bundling SVG into React component. Is there a way to speed it up? :D

[rschristian]

While it's probably not the answer you're looking for, ideally, you don't want to be importing SVGs as JS. It's horrifically expensive to do so and there better ways to consume, such as <img>, <defs>/<use>, etc.

[totszwai]

@rschristian Could you point me to the better practices to on how to use img, defs or use? The reason why I am using microbundle and converting them into React object is so that we could use it in our React TS code, ex:

import { MySpecialIcon } from '@blah/icons`;
...

<MySpecialIcon />

Similar to how Material UI bundling their icons.

[rschristian]

All you need is a loader to return a URL for the asset on an import like the following:

import React from 'react';
import ReactLogo from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <img src={ReactLogo} alt="React Logo" />
    </div>
  );
}

[totszwai]

@rschristian While that could be a solution, we are using svgr (https://react-svgr.com/) to convert SVGs into React component. The main reason is that we don't wanna deal with svg directly. Is there anything such as spawning extra job processes to speed up the bundling?

Is there an ETA on the v1.0 release? :)

[rschristian]

I get that's what you're currently doing, but SVGR is a pretty awful solution. You're paying a huge JS cost when none is required essentially.

I can't speak to the time length issue here, or any ETA, just wanted to point out that you could avoid the issue entirely as well as improve perf and UX considerably by going an alternative route.

[ForsakenHarmony]

Is there an ETA on the v1.0 release? :)

Sorry, but no