Huge bundled size

[miriyalee]

Hi, I found a bundle size problem.

parsed size : 177kb, it is biggest library in my react application.

I am using dayjs-ext 2.0.2, timezone-support 1.5.5 for showing UTC timestamp to user local time.

Is there any way to reduce size? Thank you.

[prantlf]

If you upgrade, there might be a way :-) Still, the size of the package will be decided by the time zone data, which you want to include. Also beware, that there was a bug detected in moment-timezone, which caused generation of incomplete time zone data. After fixing it, the size of the time zone data increased significantly, although it is already "packed" in strings.

The timeZone plugin in dayjs-ext imports the default "main" module from timezone-support, which supports all time zones. While timezone-support offers two other modules, which are limited to years 1900-2050 and 2012-2022 to save the package size, you cannot use them, if you import dayjs-ext/plugin/timeZone to a (compiled) React project, because the import "timezone-support" statement is hard-coded in the timeZone plugin. However, a simple web page with <script> elements can decide about the timezone-support alternative, because it needs to include all dependencies. For example, loading only data for years 2012-2022:

<script src="https://unpkg.com/[email protected]/dist/index-2012-2022.umd.js"></script>
<script arc="https://unpkg.com/dayjs-ext/dayjs.min.js"></script>
<script arc="https://unpkg.com/dayjs-ext/plugin/timeZone.js"></script>

I'd like to try some techniques to let the outermost project decide, what year span should be supported and thus the full package size. An environment variable, module bundler (rollup, webpack) mapping for the timezone-support module name etc.

For the time being, I created additional versions of the timeZone plugin, which import limited versions of the timezone-support module. I released them in the version 2.1.2 of this package, including timezone-support 1.7.0. You can include them in a usual way instead of the default dayjs-ext/plugin/timeZone plugin. For example, for time zones limited to years 1900-2050:

import dayjs from 'dayjs-ext'
import timeZonePlugin from 'dayjs-ext/plugin/timeZone-1900-2050'

dayjs.extend(timeZonePlugin)

The size of the package is affected by the size of the time zone data included:

Full IANA TZ data:  923 KB minified, 33.3 KB gzipped
Data for 1900-2050: 200 KB minified, 23.3 KB gzipped
Data for 2012-2022:  27 KB minified,  6.5 KB gzipped

Alternatively, you could build your own time zone data for years 1970-2025, for example, and use the customizable version of the plugin - timeZone-custom:

create-timezone-data -m -o data-1970-2025.js 1970 2025

import dayjs from 'dayjs-ext'
import timeZonePlugin from 'dayjs-ext/plugin/timeZone-custom'

import { populateTimeZones } from 'timezone-support/dist/lookup-convert'
import timeZoneData from './data-1970-2025'

populateTimeZones(timeZoneData)

dayjs.extend(timeZonePlugin)

I still need to document the usage of the time zone data generator.

Will some of these solutions work for you?

[miriyalee]

I updated dayjs-ext from 2.0.2 to 2.2.0,

bundled size is increased 177 to 981,

and using import timeZonePlugin from 'dayjs-ext/plugin/timeZone-1900-2022'

then using import timeZonePlugin from 'dayjs-ext/plugin/timeZone-2012-2022'

177 > 981 > 195 > 26

Thank you for super great support.