How to properly optimize your build to support new and old browsers (VueJs)

The Optimization topic of Websites can be a daunting task mostly / probably because we (as frontend developers) ship lots of code to the user maybe without knowing or knowing but not being able to do anything about it.

There are several methods online and in the documentations on how to optimize our Apps. But today i would like to point out the one quick fix for supporting old and new browser versions.

If you are here, I believe you are accustomed to this headache known as Internet Explorer ( Thank God its no longer a thing Come Windows 11 (Well at least its hidden)). Okay, digressing...

So our goal here is to ship as little code to the user as possible, there is no need to transpile code to support old browsers while the user is using a modern browser.

in your package JSON scripts add the following line

.
.
  "build-modern": "vue-cli-service build --modern"
.
.

That's all you need to do, When you run the script two versions of your app will be built for deployment. when you look closer into the index.html file, you will see something along the lines of module and nomodule Old browsers do not support module type in their scripts so they will ignore these files while the opposite is true. Meaning modern browsers have module support, so they will always process this type and ignore the nomodule scripts.

So any code that would be used to transpile code to support old browsers would only be bundled in the legacy file.

A quick check on the built js files will show you that the legacy js files are a little bit bigger than their counterparts.

Bonus:

You can also get a report on the built files by appending the --report rule on the above script such that

.
.
  "build-modern": "vue-cli-service build --modern --report"
.
.

Running this script, will give you 2 extra html file named report and legacy-report, Double clicking any of these will open a report on the files that are used in your project. you can compare the difference of the two.

Other methods of optimization can follow such as lazy loading routes and components or better yet you can find some alternatives to that large dependency that is used by your application.

No I believe you crave for more

So i found that if you are saving lots of unchanging files its a waste to make the user redownload these files again and again, Here i assume you have configured caching in your server, You can make webpack do the heavylifting for you, What i do is make sure all dependencies are served on their own and are not bundled in the main build. how do i accomplish this you ask? in your vue.config.js add these directives in the configureWebpack such that the block looks something like this

.
.
 configureWebpack: {
    optimization: {
        runtimeChunk: "single",
        splitChunks: {
          chunks: "all",
          maxInitialRequests: Infinity,
          minSize: 0,
          cacheGroups: {
            vendor: {
              test: /[\\/]node_modules[\\/]/,
              name(module) {
                // get the name. E.g. node_modules/packageName/not/this/part.js
                // or node_modules/packageName
                const packageName = module.context.match(
                  /[\\/]node_modules[\\/](.*?)([\\/]|$)/
                )[1];
                // npm package names are URL-safe, but some servers don't like @ symbols
                return `npm.${packageName.replace("@", "")}`;
              },
            },
          },
        },
      },
  },
.
.

With this you have made your app a little bit better than before. and ofcourse am all for many little requests compared to one large request.

If you have some more ways to improve App Performance, hit that bubble.