Monitor if we can remove some unnecessary code from the js bundle

[mountiny]

Coming from this thread, check in the end of October if there is anything in the bundle that can be removed. We can see how big of a problem this is and evaluate if its worth to create some automatic check

Original issue #48978

[melvin-bot]

Current assignee @mountiny is eligible for the AutoAssignerNewDotQuality assigner, not assigning anyone new.

[melvin-bot]

Triggered auto assignment to @puneetlath (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

[mountiny]

No need for bug zero person now

[gedu]

Hey, I'm from Callstack, I can take a look at it

[melvin-bot]

@gedu, @mountiny Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[mountiny]

not overdue

[melvin-bot]

@gedu @mountiny this issue was created 2 weeks ago. Are we close to a solution? Let's make sure we're treating this as a top priority. Don't hesitate to create a thread in #expensify-open-source to align faster in real time. Thanks!

[mountiny]

Monthly

[gedu]

There is an increase in size of 0.6 MB, from 19.18 to 19.78 MB, and it seems to be caused by different modules. I think the next time we monitor this, if there is another big increase we should try to dig into this to find how to improve it. @mountiny

[mountiny]

sounds good, keeping this monthly

[mountiny]

@gedu how is this looking now?

[gedu]

A month has passed already? wow, I will check

[gedu]

This time the increase was 0,34MB, from 19,78MB to 20,12MB. Not sure if we want to set a max value so we try to be below it. @mountiny

[mountiny]

Is there anything you could find that could be removed?

[gedu]

I can take a deeper look and see if I can find something

[gedu]

@mountiny First thing I saw it is this pdfjs-dist that the react-fast-pdf uses (exfy lib), and in code we depend on legacy code directly like this component. Do you know why it is being used like that? do you know the min version browser support?

Now

If we don't need the legacy one we can save ±2MB

If you have more information around it would be awesome, and if needed I can check with one of our devs to take a deeper look

[gedu]

@mountiny I was investigating a bit further and probably would be good to create an issue around this because now, for example the PDFThumbnail always will use legacy code even in modern browser, so that can impact the performance and browsers won't benefit from new features

import pdfWorkerSource from 'pdfjs-dist/legacy/build/pdf.worker.mjs';

Given that importing a worker is the recommended way, maybe we can be smarter on which build to load (thanks to @rezkiy37 to point this)

[mountiny]

@gedu yeah this sounds good to me

Would you mind posting the details of the problem/ solution here for the issue and I can create it

[gedu]

Propose to update react-native-qrcode-svg to use rn 0.75 so we can conditionally add that lib and possibly save ±600kb?

I found this issue reported: Expensify/react-native-qrcode-svg#199
This is the commit which added the text-encoding lib: Expensify/react-native-qrcode-svg@53f1c5f

Chatting internally, we think we can add a conditional code to would work as expected. if someone is using 0.75 with TextDecoder & TextEncoder supported natively then fine we don’t require text-encoding and we don’t include it in final’s app bundle, the rest of the people it works as expected.
or we can try: https://microsoft.github.io/rnx-kit/docs/tools/metro-serializer-esbuild

[mountiny]

Sounds good, feel free to make a proposal!

[gedu]

Background

react-fast-pdf is a library that simplifies working with PDF files in React applications by leveraging pdfjs-dist, a popular library for rendering PDFs. However, pdfjs-dist provides multiple builds of its worker file (pdf.worker.js), including a legacy version designed for older browsers and a modern version optimized for newer environments.
Currently, react-fast-pdf is configured to always load the legacy version of pdf.worker.js (pdfjs-dist/legacy/build/pdf.worker.mjs). This approach ensures compatibility with older browsers but does not take advantage of the performance improvements and reduced file size offered by the modern build. As a result, even applications running in modern browsers are forced to use the less efficient legacy build, which increases resource usage and impacts performance.
This behavior is particularly relevant for developers aiming to optimize their applications for modern environments, where smaller bundle sizes and faster load times are critical for user experience.

Problem

When using react-fast-pdf, it always loads the legacy version of pdf.worker.js from pdfjs-dist, which prevents modern browsers from leveraging newer features and optimizations, leading to performance inefficiencies.

Solution

Update react-fast-pdf so the PDFThumbnail component (and any other relevant parts of React-PDF) to dynamically load the appropriate pdf.worker.js build based on the environment.

1. Defaulting to the Modern Build: Use the modern pdf.worker.min.mjs file as the default worker for environments that support it.
2. Fallback to Legacy Build: Gracefully fallback to the legacy build only when necessary (e.g., for older browsers that lack support for modern JavaScript features).
   This can be achieved by https://microsoft.github.io/rnx-kit/docs/tools/metro-serializer-esbuild or conditional code

[gedu]

Background

react-native-qrcode-svg relies on the text-encoding library to provide TextDecoder and TextEncoder functionality, which is essential for encoding and decoding text data. However, starting with React Native 0.75, these functionalities are natively supported, making the inclusion of text-encoding redundant for modern environments.
Despite this, the library currently includes text-encoding in all builds, regardless of the React Native version. This results in an unnecessary increase in app bundle size, particularly for developers using React Native 0.75 or higher, where native support for TextDecoder and TextEncoder is already available. This behavior impacts performance and resource usage, especially for applications targeting modern devices.

Reference the relevant issue and commit:
• Issue: Expensify/react-native-qrcode-svg#199
• Commit: 53f1c5f

Problem

The react-native-qrcode-svg library always includes the text-encoding library, adding approximately 600KB to the app bundle size. This is unnecessary for React Native 0.75+ environments, where TextDecoder and TextEncoder are natively supported, leading to inefficiencies in modern applications.

Proposed Solution

Update react-native-qrcode-svg to conditionally include the text-encoding library based on the React Native version or the availability of native TextDecoder and TextEncoder. This can be achieved through the following steps:

1. Version Check:
   ○ Add conditional logic to detect if the app is running on React Native 0.75 or higher.
   ○ Exclude the text-encoding library from the bundle if native support for TextDecoder and TextEncoder is available.
2. Metro Serializer Optimization:
   ○ Use tools like Metro Serializer Esbuild to further optimize the bundle and ensure unused dependencies like text-encoding are excluded.