Web Development

3785 readers

6 users here now

Welcome to the web development community! This is a place to post, discuss, get help about, etc. anything related to web development

What is web development?

Web development is the process of creating websites or web applications

Rules/Guidelines

Follow the programming.dev site rules
Keep content related to web development
If what you're posting relates to one of the related communities, crosspost it into there to help them grow
If youre posting an article older than two years put the year it was made in brackets after the title

Related Communities

Wormhole

[email protected]

Some webdev blogs

Not sure what to post in here? Want some web development related things to read?

Heres a couple blogs that have web development related content

https://frontendfoc.us/ - [RSS]
https://wesbos.com/blog
https://davidwalsh.name/ - [RSS]
https://www.nngroup.com/articles/
https://sia.codes/posts/ - [RSS]
https://www.smashingmagazine.com/ - [RSS]
https://www.bennadel.com/ - [RSS]
https://web.dev/ - [RSS]

Credits

Icon base by Delapouite under CC BY 3.0 with modifications to add a gradient

founded 2 years ago

MODERATORS

[email protected]

Do we need Live Reload (Watch) in bundlers? (marketplace.visualstudio.com)

submitted 10 months ago by [email protected] to c/[email protected]

6 comments fedilink hide all child comments

Do we need live reload feature in bunders? Couldn't we just use this extension for Visual Studio Code or simular features and extensions in other IDEs which will execute a custom command of your choice when you save a file with a certain file extension in your IDE?

https://marketplace.visualstudio.com/items?itemName=emeraldwalk.RunOnSave

This extensions allows you to customize the commands to execute in saving a file in your global VSCode settings and in the VSCode workspace settings .vscode/settings.json, allowing others to use the same configuration in group projects.

Lightning CSS does not have a live reload feature and the live reload feature in Rollup cannot handle watching many files, however using this extension in VSCode, will not watch files but run the npm run dev:css or npm run dev:js command when saving a css or js file without watching for files to change.

One downside I see with this is when working on a project with others who are using different IDEs that do not support this feature. Besides that, is there any downsides to this approach?

you are viewing a single comment's thread
view the rest of the comments

[–] [email protected] 7 points 10 months ago (5 children)

Incremental builds are much faster as it often only need to rebuild the specific part that changed. Just re-running the build in VSCode won't help you if the build takes like 5 minutes, but still instant with watch mode.

Hot reload also has some advantages such as not having to reload the page and lose state: it can just update the CSS live so you can quickly iterate on your styles even if you're deep into the navigation at page 10 of a modal window.

We don't need live reload/watch, but it sure is convenient.

[–] [email protected] 2 points 10 months ago (1 children)

Why could a build take 5 minutes? Is it due to the size of your project or the language the bundler is written in (JavaScript being a slower option over Rust)?

[–] [email protected] 4 points 10 months ago

The scale of things. Large projects take longer to compile and bundle because they're made out of thousands of files and hundreds of thousands of lines of code.

Yeah, your hello program will go just as fast without a bundler, or a simple bundler. It's when you go big, and use tons of libraries and stuff that it slows down and the advantages become clearer.

That's especially true when using big libraries like React and dozens of plugins for it, frameworks like Next.js, SASS for CSS or CSS in JS, all the JSX, all the TypeScript. It adds up especially if Babel is also involved to transpile for older browser support.

5 minutes is a bit of an extreme use case, but the point is after the first build, live reload would still refresh your code at the same speed. So working on one page you don't need to constantly rebuild the other hundreds of them, just the one you changed. If you target mobile platforms with Cordova or React Native then you also add a whole Android/iOS build + install + restart of the app. The same live reload would work even in that context, making the speed advantage even more apparent.

These things are designed for large enterprise projects, not for your small helloworld sized hobbyist programs.

load more comments (3 replies)