React-pdf: yoga-layout-prebuilt adds massive overhead to bundle

[hutch120]

Hi Gents... @DuncanMacWeb @diegomura

When this module is imported it adds massively to the webpack optimised bundle size, in the order of about 600KB gzipped.

This nearly doubles my current optimised package size, and webpack starts to throw warnings about bundle size. The bundle size is significantly larger than recommended.

I'd say the yoga-layout-prebuilt module is the cause. Looking at the raw webpack bundle (*.chunk.js) code, I can see a bunch of stuff from nbind.js

Describe the solution you'd like
Is it possible to package a cut down build of yoga-layout?

Describe alternatives you've considered
I had a look at issues #364 and #603 but I'm guessing getting a yoga build process is pretty involved.

[hutch120]

Ok solved it... code splitting and dynamic loading to the rescue.

Create AsyncComponent.js

Dynamically load all the components that use import { PDFDownloadLink, Document, ... } from '@react-pdf/renderer' like this:

Change imports from this:

const Preview = import('./Preview')
const Download = import('./SomeDoc')
...

To this:

import asyncComponent from "./components/AsyncComponent";
const Preview = asyncComponent(() => import('./Preview'))
const Download = asyncComponent(() => import('./Download'))
...

Use component like normal

render () {
  return (
      <div>
        <Preview />
        <Download />
      </div>
   )
}

You should now have a new chunk.js file that is about 677KB.

File sizes after gzip:

  677.42 KB          build\static\js\3.0689230a.chunk.js <=== ReactPDF.
  617.15 KB          build\static\js\0.254f3f2a.chunk.js  <=== The rest of my app.
  86.58 KB (+237 B)  build\static\js\main.34e03a70.chunk.js
  ..

References:
Create React App not playing nice currently with dynamic imports.... workaround here:
https://github.com/facebook/create-react-app/issues/6873#issuecomment-486205976

Code splitting stuff
https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html
https://reactjs.org/docs/code-splitting.html

[diegomura]

Thanks. I’m aware of this, but unfortunately there’s no much I can do for the moment. I wish there is a pure JS yoga solution, but there isn’t. And the problem it solves is not easy. That means we are kind of stuck with it for the moment.

Some months ago I literally translated yoga C++ code to JS, but couldn’t finish. I’m not sure if that was a good idea either since I’m not sure if I can mantain that code in the future (was very messy)

[hutch120]

@diegomura No worries.. thanks for getting back to me.

Code splitting was really easy to implement, doesn't seem to have any side effects, reduced the app load time and possibly should be the recommended solution for webpack based projects.

Is there value in me doing a Pull Request with a note in the readme about this? Might avoid people being surprised when they go to build their project and see the size?

[diegomura]

Definitely!
If the explanation is too long we can add it to the site, or to a docs dir and a link in the README

[nero2009]

This helped me cause I recently added react-pdf to my projects and the bundle size doubled. Thanks for the detailed explanation @hutch120

[hutch120]

@nero2009 Thanks for the feedback. I checked out your website and your latest blog post which is very nicely written. I've been involved in software engineering for well over 20 years and I learn something new every day. I think your article is on the right track, embrace learning, and make sure you put it into practice by doing! It's a wonderful career that I continue to love, I wish you good luck in your journey!