Frontend webpack optimization

Most of developers uses webpack to build their applications to run for production environment.

We all know webpack also minimizes our code during build

Importance of built file sizes

The size of built files are very important as users need to download these files to run the application on the web and obviously if file size is large then it can cost performance.

How do we minimize these files?

There are few points that can minimise files further:

• Remove all unused packages
• Try build your own functions instead of relying on external packages. Thats if it's simple enough to build. (Eg. underscore, jquery packages are good examples. These are quite huge packages but with recent ECMAScripts, most of core functions are covered)
• Tree shaking
• Analyse to remove any unnecessary files
• Removing duplicated packages

Webpack analyzer

Analyzining webpack output is a good way to start to investigating on the optimization. Webpack analyzer is a webpack plugin that displays all packages in the application in a diagram with interactions where developers can easily identify and find any unnecessary packages and files that can be removed to make build files size smaller.

The analyzer is very simple to setup.

1. Install the package
2. Include the plugin in the webpack config file

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}

You can find more from the link below.
webpack-bundle-analyzer

Tree shaking

Tree shaking is a process of removing unused exports from a module.

This can be done by using ECMA import/export keyword instead require. This way webpack will pick which dependency to export and not during build process.

Also, if you are react user then code splitting can help on optimization as well. For example we can set a lazy load on component level to be rendered asynchronously.
Eg.

const ComponentA= React.lazy(() => import('./ComponentA'));

This will allow the component to be rendered only when its needed

Removing duplicated packages

Sometimes when we install packages, some of them uses the same dependency but with different versions.

(Resources are from Atlassian)
For eg.

As we can see there are 3 different button package verions (1.0.0, 1.3.0, 2.5.0) but ideally we can make this better to have it like:

This way, technically it can remove 2 dependencies in total that can reduce a quite size.

How it's done? it is quite simple. Atlassian provides npm package and github link for this webpack plugin and developers can simply add the plugin into webpack config.

webpack-deduplication-plugin

const { WebpackDeduplicationPlugin } = require('webpack-deduplication-plugin');

module.exports = {
  plugins: [
    new WebpackDeduplicationPlugin({
        cacheDir: cacheDirPath,
        rootPath: rootPath,
    }),
  ]
}

However, be careful before using the plugin because some of packages require a specific version of dependency and if thats the case this may cause more problems.

Building your own functions

Packages like jquery and underscore provides very useful functions which developers can immediately pick up and use it to build applications faster.
However, most of core functions that these packages provide are covered in recent ECMAscripts, so technically developers can live without it.

Speed in development is quite important because we need to hit deadlines and sometimes these deadlines are ridiculous BUT if you are building a platform/product that needs to be maintained afterward then you should rethink about using these kind of packages since:

• They are generally huge
• Most of them are covered in recent ECMA. (Eg. map, forEach, reduce, etc)
• Replacing/removing these packages are pain.

---

So in overall, I was able to save ~42% after applying these methods in recent project (42% is HUGE).