From 5eec8c71ccff8f43a5f31b1bded801d3fb40bcb0 Mon Sep 17 00:00:00 2001
From: Mark Rickert <139261+markrickert@users.noreply.github.com>
Date: Tue, 3 Oct 2023 12:34:18 -0600
Subject: [PATCH] fix(boilerplate): date-fns import syntax (#2510 by
 @markrickert)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Because react-native doesn’t tree-shake, importing things from `date-fns` bundles ALL of the `date-fns` library, which is quite heavy.

Changing from the syntax `import { Locale, format, parseISO } from "date-fns”` to importing them individually like:

```ts
import type Locale from "date-fns/locale"
import format from "date-fns/format"
import parseISO from "date-fns/parseISO"
```

Saves us 0.41 megabytes in the production bundle size of an ignited app. That’s a HUGE savings for such a small syntax thing.

I also added scripts to the boilerplate to use `react-native-bundle-visualizer` through `npx` (which is how i determined this bundle filesize savings).

Before this PR: `yarn bundle:visualize`: 5.13mb
After this PR: `yarn bundle:visualize`: 4.72mb
---
 boilerplate/app/utils/formatDate.ts | 8 +++++++-
 boilerplate/package.json            | 2 ++
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/boilerplate/app/utils/formatDate.ts b/boilerplate/app/utils/formatDate.ts
index dcc9ce962..d1f4a48ba 100644
--- a/boilerplate/app/utils/formatDate.ts
+++ b/boilerplate/app/utils/formatDate.ts
@@ -1,6 +1,12 @@
-import { Locale, format, parseISO } from "date-fns"
 import I18n from "i18n-js"
 
+// Note the syntax of these imports from the date-fns library.
+// If you import with the syntax: import { format } from "date-fns" the ENTIRE library
+// will be included in your production bundle (even if you only use one function).
+// This is because react-native does not support tree-shaking.
+import type Locale from "date-fns/locale"
+import format from "date-fns/format"
+import parseISO from "date-fns/parseISO"
 import ar from "date-fns/locale/ar-SA"
 import ko from "date-fns/locale/ko"
 import en from "date-fns/locale/en-US"
diff --git a/boilerplate/package.json b/boilerplate/package.json
index 0a6446ac9..92a5326eb 100644
--- a/boilerplate/package.json
+++ b/boilerplate/package.json
@@ -18,6 +18,8 @@
     "postinstall": "node ./bin/postInstall",
     "bundle:ios": "react-native bundle --entry-file index.js --platform ios --dev false --bundle-output ios/main.jsbundle --assets-dest ios",
     "bundle:android": "react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res",
+    "bundle:visualize": "npx react-native-bundle-visualizer",
+    "bundle:visualize:dev": "npx react-native-bundle-visualizer --dev",
     "release:ios": "echo 'Not implemented yet: release:ios. Use Xcode. More info: https://reactnative.dev/docs/next/publishing-to-app-store'",
     "release:android": "cd android && rm -rf app/src/main/res/drawable-* && ./gradlew assembleRelease && cd - && echo 'APK generated in ./android/app/build/outputs/apk/release/app-release.apk'",
     "clean": "npx react-native-clean-project",