Our great sponsors
- Appwrite - The open-source backend cloud platform
- Sonar - Write Clean JavaScript Code. Always.
- InfluxDB - Collect and Analyze Billions of Data Points in Real Time
- Revelo Payroll - Free Global Payroll designed for tech teams
- Onboard AI - Learn any GitHub repo in 59 seconds
-
Check out https://esm.sh/#cli for a minimalist yet full featured solution that amends your import map for you. It does require Deno.
-
Here here. Today, bundlers may get you to first page load faster. But if a user comes back and you've shipped two small fixes, all those extra wins you get from compressing a bunch files at once fly out the window & you're deep in the red. If you have users that return to your site, and your site is actively developed, bundling is probably a bad tradeoff.
We see similar fixedness in the field all over the place: people freaking love small Docker image sizes & will spend forever making it smaller. But my gosh the number of engineers I've seen fixate on total download size for an image, & ignore everything else, is vast. Same story, but server side: my interest is in the download size for what v1.0.1 of the Docker container looks like once we already have v1.0.0 already shipped. Once we start to consider what the ongoing experience is, rather than just the first time easy-to-judge metric, the pictures all look very different.
Then there's the other thing. The performance reasons for bundling are being eaten away. Preload & Early Hints are both here today & both offer really good tools to greatly streamline asset loading & claw back a lot of turf, and work hand-in-glove with import-maps. The remaining thing everyone points out is that a large bundle compresses better (but again at the cost of making incremental updates bad). The spec is in progress, but compression-dictionary-transport could potentially obliterate that advantage, either make it a non-factor, or perhaps even a disadvantage for large bundles (as one could use a set of dictionaries & go discover which of your handful of dictionaries best compress the code). These dictionaries would again be first-load hit, but could then be used again and again by users, to great effect again for incremental changes. https://github.com/WICG/compression-dictionary-transport
Bundles are such an ugly stain on the web, such an awful hack that betrays the web's better resourceful nature. Thankfully we're finally making real strides against this opaque awful blob we've foisted upon this world. And we can start to undo not just the ugliness, but the terrible performance pains we've created by bundling so much togther.
-
Appwrite
Appwrite - The open-source backend cloud platform. The open-source backend cloud platform for developing Web, Mobile, and Flutter applications. You can set up your backend faster with real-time APIs for authentication, databases, file storage, cloud functions, and much more!
-
Seeing this, it reminded me of an interesting topic: caching at browser-level the external libraries used for big performance improvements: https://github.com/w3c/webappsec-subresource-integrity/issue...
-
simpatico
Simpatico is an umbrella term for several data-structures and algorithms written in JavaScript
>Does this mean that in theory i could skip the build/bundling step entirely?
You can but you must write your app in something the browser understands (js not ts, css not sass etc) and use native modules. For example, here is the test harness for a custom module, written in pure html with no build step: https://github.com/javajosh/simpatico/blob/master/combine2.h.... Here is a more complex (and much older) example from Crockford: https://www.jslint.com/
And yes, the experience developing this way is quite nice!
-
>Does this mean that in theory i could skip the build/bundling step entirely?
You can but you must write your app in something the browser understands (js not ts, css not sass etc) and use native modules. For example, here is the test harness for a custom module, written in pure html with no build step: https://github.com/javajosh/simpatico/blob/master/combine2.h.... Here is a more complex (and much older) example from Crockford: https://www.jslint.com/
And yes, the experience developing this way is quite nice!
-
This downloads the ESM version of Observable Plot from the jsDelivr CDN, figures out its dependencies, downloads them as well (40 files total!) and rewrites their imports to be local, not CDN paths.
More details here: https://simonwillison.net/2023/May/2/download-esm/
I'm not considering adding import maps support: https://github.com/simonw/download-esm/issues/4
-
In Sciter I did just that - JSX is an integral part of JS compiler - patched version of QuickJS : https://gitlab.com/c-smile/quickjspp/-/blob/master/quickjs-j...
So in Sciter this works out of the box:
-
Sonar
Write Clean JavaScript Code. Always.. Sonar helps you commit clean code every time. With over 300 unique rules to find JavaScript bugs, code smells & vulnerabilities, Sonar finds the issues while you focus on the work.
-
-
Note that `deno bundle` is deprecated. You can almost replace it with esbuild but it currently lacks builtin support for import maps:
deno run --allow-all https://deno.land/x/esbuild@v0.17.18/mod.js --bundle app.js --outfile=bundle.js. # errors, see: https://github.com/evanw/esbuild/issues/2230 -
-
Lit also requires no build step and is shipped only as standard JS modules. It also uses file extensions in all imports so that the required import map to access all files is very short (one index map + one prefix map * 4 core packages). See https://lit.dev
Related posts
- Modern VS Code extension development: The basics
- How I approach and structure Enterprise frontend applications after 4 years of using Next.js
- How to set up ESLint and Prettier in React TypeScript 5 project? 2023
- 6 Regrets I Have As a React Developer
- Start programming blog in minutes with Astro and Vrite