If you have seen my previous blog on Parcel bundler then you'd know my thoughts on Webpack. It is big, complicated and slow. It's big and complex because there are a lot of plugins for it and many ways to set it up as well as customising it. It is slow often due to the enterprise applications it is used in, simply because there are a lot of things going on in these projects than someone's SPA (single page application) personal project. Nobody wants to wait more than 1 min for the build process, here I'll be talking about a couple of practical hacks to boost the Webpack build performance used in a recent project.
I started to blog around the end of 2015, 3 years later it has been an interesting journey. I think I benefited quite a lot from it and thought I'd share my experience and some of my blogging practices with people who are looking to start blogging or simply want some inspirations.
I recently created a project using Vue CLI 3, and after got the project set up to a basic state I decided to add it onto Netlify and get the builds going for future reference (Netlify keeps all previous builds and if they are static sites then it also serves them at generated URLs). I started doing this late at night, and after battling it for a few hours I still didn't get anywhere. It was a pretty stressful situation, I just couldn't work out why I kept getting
vue-cli-service: not found errors when Netlify runs the build. There was surprising little help online for this, maybe not many people have started using Vue CLI 3 with Netlify yet? I only managed to find out the reason after more digging and thought I'd share my solution so no one else needs to go through the same amount of pain.
First of all, I just want to say that I love the concept of rapid prototyping!
Why? There are so many reasons, but here are just a few which I value deeply:
- Different to normal development - It gives you a whole new perspective to software development, normal expectations and assumptions are not valid here. Testing? Hmmm, maybe later. Team chat about coding standard? No need, we will use someone else's lint rules.
- Learning opportunities - It really tests your knowledge of different toolsets, libraries, and services. If you are working with other people, then there is a high chance of you picking up something you didn't know before.
- Achievement - Literally build something from nothing in a matter of hours or days.
Vue CLI is a powerful tool, designed to help developers to set up a base project on which they could start building on top of with extreme ease. It offers a bunch of configuration options which caters for different people's preferences and needs. However, as someone who's new to Vue or web development, it could be scary trying to go through the manual setup. This blog post attempts to change that, by explaining each step and give my personal recommendation for each configuration.
Anyone who's been working with frontend web development should know the pain of browser support. I never understood why people stick with older browsers and I might never find the answer. I'm sure many fellow developers have the same confusion. Apart from corporate machines, there is very little reason to stay on older browser versions. Modern browsers are both more secure and faster! Need more reason? You get all that for free and there are plenty to choose from, what more can we ask for? For us, developers, nothing about this makes any sense.
I was recently learning about Mobx and came across a blog with nice code syntax highlighting, and thought the code snippets on my blog are both hard to read and pretty boring to look at. So it inspired me to upgrade my blog!
I heard about Parcel about a year ago, back then I didn't feel like it was stable enough to be used in my personal projects. And that I was just getting into RollupJS, compared to Webpack that was already a massive step up in terms of ease of use and simplified configuration. A year later, now I am finally ready to try out Parcel and see exactly how simple it is compared to the established alternatives like RollupJS and Webpack.