webpack-bundle-analyzer VS vite

Analyze Bundle Size: Use tools like webpack-bundle-analyzer to analyze and reduce your JavaScript bundle size. This can help identify large dependencies that may be slowing down your app.

- `npm run start` - Start the app - `npm run lint` - Lint the project - `npm run test` - Run unit tests - `npm run build` - Build the project - `npm run build:prod` - Build the project in production mode - `npm run build:prod:stats` - Build the project in product mode with stats - `npm run analyse` - Analyse bundle with [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer) - `npm run compodoc` - Generate [compodoc](https://github.com/compodoc/compodoc) documentation - `npm run version` - Generate changelog - `npm run prettier` - Format the whole project - `npm run audit` - Audit this application using Sonatype OSS Index

If you're using Webpack for bundling your app, there's the very well known webpack-bundle-analyzer which comes as a webpack plugin that you need add in your webpack config file in order to use it.

Then, with the Webpack Bundle Analyzer plugin, we discovered problematic areas in bundles. Bundle Analyzer highlighted our biggest bundles – client-location and map-with-flashing-dots

I used to use webpack-bundle-analyzer but we have switched the builder to browser-esbuild now.

First start by running a webpack bundle analysis to see what exactly is bundled. You might be surprised about things being included that you didn't expect which can help with where to look.

Firstly I recommend taking a look at the structure of the webpack output with something like webpack-bundle-analyzer for any obvious over bundling issues.

See: https://github.com/webpack-contrib/webpack-bundle-analyzer

Webpack Bundle Analyzer

First, let's create our app using Vite (it's super fast and modern):

Developers understand imposter syndrome, as a developer I feel this too. Take React, for instance. You spend months getting comfortable with it, building components, managing state, and feeling pretty good about your skills. Then suddenly, everyone's talking about Vite and how it's the next big thing. Should you drop everything and learn Vite? Is React dead now?

At this point, we wanted to rely less on meta-frameworks and initially decided to use only the build tool Vite while writing the browser extension-specific configuration ourselves to minimize dependencies. We had seen great reviews of Vite from various developer communities online, so it seemed like the right choice.

I checked and sass-embedded was included in peerDependencies at this time, so it must have been an error since then. https://github.com/vitejs/vite/commit/1025bb6d8f21c0cb9fe72405d42e0f91bb3f1d8e

Vite is the new kid on the block, ready to blow your mind with speed and simplicity. And Vite isn’t just important for developers; it’s a game-changer for businesses. Speedy development cycles equals happy devs. Happy devs build better code. That means faster time-to-market and lower costs for your business or clients.

Vite

Frontend: Vite + React + TypeScript Backend: Express (Node.js) + TypeScript Database: Neon (PostgreSQL) Note: You can use other databases like MongoDB as well.

To begin, we will create a new blank project. You can skip this paragraph if you’re looking to add the solution to an existing project. Using Node Package Manager (NPM), we will create the project with the command: npm create vue@latest. The default settings are fine for our purposes, but if you prefer, you can change them. I enabled ESLint and Prettier options. There are other ways to initiate a Vue project, but I prefer this one because it uses Vite as the development server by default.

As a replacement we've chosen Vite. This is a suitable replacement as it comes with a super fast development server and a very well optimized release build.

What's the solution? In one word: Vite.