DEV Community

Cover image for Optimizing moment-timezone using webpack
Achilles Moraites
Achilles Moraites

Posted on

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,
    }),
  ]
};
Enter fullscreen mode Exit fullscreen mode

And that's it :)

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

Happy coding! :)

Top comments (3)

Collapse
 
dendihandian profile image
Dendi Handian

Could we get a list of timezones using this package? How to do it?

Collapse
 
achimoraites profile image
Achilles Moraites • Edited

I assume you would like to know the list of timezones the moment-timezone has by default ?

// To get a list of all available time zone names, use moment.tz.names.
moment.tz.names(); // ["Africa/Abidjan", "Africa/Accra", "Africa/Addis_Ababa", ...]
Enter fullscreen mode Exit fullscreen mode

momentjs.com/timezone/docs/#/data-...

Or what timezones are actually being left after the MomentTimezoneDataPlugin Webpack plugin ?

Collapse
 
dendihandian profile image
Dendi Handian

The first solution is fine. Thanks