Optimizing moment-timezone using webpack

moment-timezone is an awesome tool to have when working with different time-zones.

While the tool is great it also has lots of data that we might never use, bloating the size of our applications.

We can do better!

But first, some facts

To optimize an application we need to know some things about it.

Imagine that we have an application that is providing a search functionality for scientific articles.

• Each article has information about it's creation and last modification dates.

• The oldest article is from 1990.

• Our application is being used by universities in Europe and Australia only.

So we need the following timezone data

• time-zones from Europe and Australia only
• year range from 1990 - 2020 (present year)

Optimizing based on our needs

Now that we know what we need, we can start the optimization.

We will use a webpack plugin called moment-timezone-data-webpack-plugin to keep only the data we need from our application.

Install the plugin

npm i -D moment-timezone-data-webpack-plugin

Adding the plugin to webpack

For simplicity I will only show the plugin related configuration in the webpack file.

const MomentTimezoneDataPlugin = require('moment-timezone-data-webpack-plugin');

module.exports = {
  plugins: [
    new MomentTimezoneDataPlugin({
        matchZones: [/^Europe/, '/^Australia/'],
        startYear: 1990,
        endYear: 2020,
    }),
  ]
};

And that's it :)

Now our application will have only the timezone data that we actually need!

Happy coding! :)