moment-timezone-data-webpack-plugin

What is moment-timezone-data-webpack-plugin?

The moment-timezone-data-webpack-plugin is a Webpack plugin designed to optimize the inclusion of moment-timezone data in your Webpack bundles. It allows you to include only the timezone data you need, reducing the overall bundle size and improving performance.

What are moment-timezone-data-webpack-plugin's main functionalities?

Include Specific Timezones

This feature allows you to include only specific timezones in your Webpack bundle. In this example, only the data for 'America/New_York' and 'Europe/London' timezones will be included.

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

module.exports = {
  plugins: [
    new MomentTimezoneDataPlugin({
      matchZones: 'America/New_York|Europe/London'
    })
  ]
};

Include Timezones by Region

This feature allows you to include all timezones within a specific region. In this example, all timezones in the 'America' region from the year 2000 to 2030 will be included.

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

module.exports = {
  plugins: [
    new MomentTimezoneDataPlugin({
      startYear: 2000,
      endYear: 2030,
      matchZones: 'America/*'
    })
  ]
};

Include Timezones by Year Range

This feature allows you to include timezone data for a specific range of years. In this example, timezone data from the year 2010 to 2020 will be included.

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

module.exports = {
  plugins: [
    new MomentTimezoneDataPlugin({
      startYear: 2010,
      endYear: 2020
    })
  ]
};

Other packages similar to moment-timezone-data-webpack-plugin

moment-timezone

The moment-timezone package provides timezone support for moment.js. It includes all timezone data by default, which can lead to larger bundle sizes. Unlike moment-timezone-data-webpack-plugin, it does not offer built-in Webpack optimizations to reduce bundle size by including only specific timezones.

date-fns-tz

The date-fns-tz package is an extension for date-fns that provides timezone support. It is more modular and tree-shakeable compared to moment-timezone, but it does not offer the same level of integration with Webpack for optimizing timezone data inclusion as moment-timezone-data-webpack-plugin.

luxon

Luxon is a modern JavaScript library for working with dates and times, built by one of the Moment.js developers. It includes built-in timezone support and is designed to be more lightweight and modular. However, it does not provide specific Webpack plugins for optimizing timezone data inclusion like moment-timezone-data-webpack-plugin.

README

moment-timezone-data-webpack-plugin

Oof, that’s a clunky name, but at least it’s descriptive.

This is a plugin for webpack which reduces data for moment-timezone.

• Why is this needed?
  • Example
  • ⚠️ Make sure you know what you’re doing ❗️️
• Usage
  • Installation
  • Configuration
    • Plugin options
  • Version support
• Examples
  • All zones, with a limited date range
  • All data for a specific zone
  • Limited data for a set of zones (single regular expression)
  • Limited data for a set of zones (array of values)
• License

Why is this needed?

Moment Timezone is a comprehensive library for working with time zones in JavaScript. But that comprehensiveness comes with a file size cost. The full time zone data file is 903KiB raw, or 36KiB minified and gzipped (as of moment-timezone version 0.5.23).

That’s a lot of data to send to someone’s browser, especially if you don’t need all of it. Some of the time zones have data dating back to the 19th century. Thankfully there is an API to produce a custom data bundle containing only the time zone definitions you require.

Unfortunately, if you’re building your project with webpack, you don’t get to use a custom data bundle. A webpack build uses the Node.js version of moment-timezone, which automatically includes all the time zone data. Even if you configure Moment Timezone to use a custom data bundle at run-time, the full data file will still be present in your JavaScript bundle.

This plugin allows you to configure which time zone data you want. Any unwanted data is then automatically stripped from the compiled JS bundle at build time.

Use it in combination with the moment-locales-webpack-plugin to further reduce the compiled JS bundle size.

Example

Take a super-simple file which does nothing more than require('moment-timezone'). Building this with webpack in production mode results in over 1 MiB of minified JS code.

What if you only need the default English locale, and time zone data for Australia and New Zealand from 2018 to 2028? (This is a realistic scenario from a recent project.)

Running webpack in production mode results in the following file sizes:

Configuration	Raw size	Gzipped
Default	1164 KiB	105 KiB
Strip locales	959 KiB (~82%)	56 KiB (~53%)
Strip tz data	265 KiB (~23%)	69 KiB (~66%)
Strip locales & tz data	60 KiB (~5%)	20 KiB (~19%)

(Testing done with webpack@4.28.3, moment@2.23.0, moment-timezone@0.5.23.)

Even if you still need all the time zones available, reducing the data to a much smaller date range can produce significant file size savings. Building the above example file with data for all zones from 2018 to 2028 produces a file size of 288KiB, or 74KiB gzipped.

⚠️ Make sure you know what you’re doing ❗️️

Dealing with time zones can be tricky, and bugs can pop up in unexpected places. That’s doubly true when you’re auto-removing data at build time. When using this plugin, make absolutely sure that you won’t need the data you’re removing.

For example, if you know for certain that your web site/application...

1. ...will never deal with past dates & times earlier than a certain point (e.g. the launch date of the application).
   • It’s safe to remove any data before that date (using the startYear option).
2. ...will never deal with future dates & times beyond a certain point (e.g. details of a specific event).
   • It’s (relatively) safe to remove any data beyond that date (using the endYear option).
3. ...will only deal with a fixed set of time zones (e.g. rendering times relative to a set of physical buildings in a single country).
   • It’s safe to keep only the data required for those zones (using the matchZones option).

However, if you’re allowing users to choose their time zone preference — with no theoretical limit on the range of dates you’ll handle — then you’re going to need all the data you can get.

If you’re in doubt about whether to include some data, err on the side of caution and include it.

Usage

Installation

Using npm:

npm install --save-dev moment-timezone-data-webpack-plugin

Or using yarn:

yarn add --dev moment-timezone-data-webpack-plugin

Configuration

Add the plugin to your webpack config file:

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

module.exports = {
  plugins: [
    new MomentTimezoneDataPlugin({
      // options
    }),
  ]
};

Plugin options

There are three available options to filter the time zone data. At least one option must be provided.

• startYear (integer) — Only include data from this year onwards.
• endYear (integer) — Only include data up to (and including) this year.
• matchZones — Only include data for time zones with names matching this value. matchZones can be any of these types:
  • string — Include only this zone name as an exact match (e.g. 'Australia/Sydney').
  • regexp — Include zones with names matching the regular expression (e.g. /^Australia\//).
  • array (of the above types) — Include zones matching any of the values of the array. Each value can be a string or a regular expression, which will be matched following the rules above.

Version support

This plugin has been tested with and supports webpack v4. It theoretically supports older versions of webpack (as it uses built-in webpack plugins internally), but this hasn’t been tested.

Examples

All zones, with a limited date range

const currentYear = new Date().getFullYear();
const plugin = new MomentTimezoneDataPlugin({
  startYear: currentYear - 2,
  endYear: currentYear + 10,
});

All data for a specific zone

const plugin = new MomentTimezoneDataPlugin({
  matchZones: 'America/New_York',
});

Limited data for a set of zones (single regular expression)

const plugin = new MomentTimezoneDataPlugin({
  matchZones: /Europe\/(Belfast|London|Paris|Athens)/,
  startYear: 2000,
  endYear: 2030,
});

Limited data for a set of zones (array of values)

const plugin = new MomentTimezoneDataPlugin({
  matchZones: [/^Australia/, 'Pacific/Auckland', 'Etc/UTC'],
  startYear: 2000,
  endYear: 2030,
});

License

MIT License © Gilmore Davidson

Changelog

1.0.2 – 2019-02-13

Changed

• Updated make-dir dependency to 2.0.0.

Fixed

• Fixed path matching regex for Windows directory structure (PR #4 — thanks to @vuoriliikaluoma).