Running in client side browser - browserify file is huge

[thebordella]

Great module, but I need to run this on the client side in the user's browser. Following some advice online I tried using browserify to convert the inline-css module to a js file I can include in the web page.

This actually works fine and inline-css does it job inside the browser! But ... the js file created by browserify of the inline-css module is 3.6MB! That is a big js file to weigh down loading the site especially for users on slower connections.

Is there a better way to run inline-css inside a browser without such a huge compiled bundle? Apologies if I am not asking in the right place...

[nolandg]

Did you configure browserify to minify it? and treeshake it? Can you post a public link to the compiled file?

[bernd-wechner]

Did you have any luck client siding this? I am keen to find a style inliner that runs clientside not server side.

[Stvad]

Any luck on finding in-browser solution? My first attempt at rolling my own is something like:

function inlineStyleRecursively(element: HTMLElement) {
	inlineStyle(element)
	for (const child of element.children) {
		inlineStyleRecursively(child as HTMLElement)
	}
}

function inlineStyle(element: HTMLElement) {
	const computedStyle = getComputedStyle(element)
	for (let i = 0; i < computedStyle.length; i++) {
		const name = computedStyle[i]
		element.style.setProperty(name,
			computedStyle.getPropertyValue(name),
			computedStyle.getPropertyPriority(name),
		)
	}
}

but it's surprisingly slow and does not handle things like pseudo-elements (:before/etc) and adaptive styling won't be preserved 🤔

[bernd-wechner]

Gave up ages ago and wrote my own using pretty much the method you just shared:

https://github.com/bernd-wechner/Copy-with-Style

https://dev.to/thumbone/series/14563

[Stvad]

@bernd-wechner nice, thanks for the reference! how do you handle the pseudo-selector issue I mentioned?

[bernd-wechner]

I don't ;-). I don't generally use those pseudo elements, so it I'd need to test it to see what happens.

getComputedStyle is slow alas and hence I put a lot of effort into speed tests and working out how to keep a responsive UI, a progress bar and more for costly client side operations. Took a lot of learning hence that series of articles walking through it all.

But I haven't consciously looked at pseudo elements at all. It might work, it might need special handling. I'm also not sure what you mean by adaptive styling alas. I'm an ardent learner in all areas it seems ;-).