This was a really fun episode. Discussing the topic of "Your Least Favorite Thing About Your Favorite Language". With guest @addyosmani, this naturally included a lot of JavaScript content.
We just released a new episode of DevDiscuss. Links to all the streaming apps here:
Or listen right on DEV:
Addy, otherwise, has a lot of useful things to share on the topic about web development, such as this webperf checklist:
The first performance improvement that I check for is whether the site can be shipping less JavaScript while still providing most of their value to the end user. If you're sending down multiple megabytes of JS, that might be completely fine if your target audience are primarily on desktop, but if they're on mobile this can often dwarf the costs of other resources because it can take longer to process.
In general, I try to go through the following list and check off if the site could be doing better on one or more of them:
✂️ Send less JavaScript (code-splitting)
😴 Lazy-load non-critical resources
🗜 Compress diligently! (GZip, Brotli)
📦 Cache effectively (HTTP, Service Workers)
⚡️ Minify & optimize everything
🗼 Preresolve DNS for critical origins
💨 Preload critical resources
📲 Respect data plans
🌊 Stream HTML responses
📡 Make fewer HTTP requests
📰 Have a Web Font loading strategy
🛣 Route-based chunking
📒 Library sharding
📱 PRPL pattern
🌴 Tree-shaking (Webpack, RollUp)
🍽 Serve modern browsers ES2015 (babel-preset-env)
🏋️♀️ Scope hoisting (Webpack)
🔧 Don’t ship DEV code to PROD
Happy coding ❤️
Top comments (4)
Many modern web frameworks and hosting providers take care of so many of these very deep technical concerns for us and as a dabbler of webdev I greatly appreciate them for the experience they bring.
I want a nice experience building my side projects while giving users the best experience within reason. There are definitely issues of too much JavaScript, duplicated data, but for the most part they are good enough out of the box for my use.
Actually, very few of these things are taken care of by frameworks. The only one that most frameworks do automatically on build is minification. Everything else is something the developer has to be aware of and handle in one way or another. Even with tree shaking, if it is configured in one's chosen toolset, the developer still has to be aware of the correct way to import a library's modules in order for said library's tree to be shaken. If you really think the bundle's you're getting by default are "good enough", you should really look again. Those bundles are almost certainly not actually optimized.
Thanks for the tips. I will definitely look closer at my import statements.
DEV code to PROD? Is it a pun?
Copying and pasting from DEV.to