Almost 1MB in bundle file size?

[zaynv]

Hey, and thanks for the amazing work on this project.

I had a question regarding the size of react-pdf. I created a small test-app with create-react-app, and the only code I put in was the sample code you provided as an example (gist here). When I ran npm run build to create a the create-react-app version of a production bundle, the bundle.js file size came out to be 955K.

Is this to be expected when using this project? Is this project using minified versions of pdfjs? If not, is there a way I can make it do so for production?

Thanks for your time, and great work on the project nnarhinen and all contributors!

[wojtekmaj]

Hey @zaynv! Deleted my previous response as it was totally wrong. Yes, you are right, I investigated and we can indeed make the bundle much smaller. Still it will be pretty large, several hundred K. Optimizations will come in the next release!

[wojtekmaj]

Hi!
A small update on what's going on.

Why the bundle was so big?

A big mistake of mine was that pdf.worker.js was sneaking into the bundle - I've had the same situation with my react-pdf sample page.

Why having pdf.worker.js in the bundle is considered a mistake?

PDF.js is not designed to work with Webpack specifically and default Webpack's behavior to put it in the bundle is an unwanted behavior. More on this here.

What has been done on react-pdf side to resolve this?

I've fixed this on my current master branch and now I'm building the project in a way that copies pdf.worker.js file into my output directory while ignoring pdf.js's request to require it in its own bundle.

If you want to test this bleeding edge code, temporairly change your package.json to say:
"react-pdf": "git+ssh://git@github.com/wojtekmaj/react-pdf.git"

What is the outcome?

1. Sample bundle I'm using for testing has shrunk from 1002 to 439 KB (-56%), 117 KB gzipped. Woo!
2. pdf.worker.js is now a separate file (677 KB). react-pdf will attempt to use it, but it is not necessary for react-pdf to work. But you might want to use it, because...
3. react-pdf is now supporting workers. That means faster rendering, better responsiveness. You really, really, really want this if you have large PDF files to display and I'm very happy to announce this!

What I could use a hand with?

1. I can't figure out why I needed to use webpack.IgnorePlugin to get rid of pdf.worker.js required by pdfjs itself. Copying what Mozilla did in its Sample results in pdf.worker.js being placed twice in my final bundle :( I'd like to get this solved before making another release...

[wojtekmaj]

Hey!
Version 1.7.0 has just been released. Although the size didn't shrink by much, now you can choose to either keep the relatively large size and have vastly improved performance (default - enable workers) or have reduced size at the cost of performance (no workers - behaves like 1.6.1 and older).

[zaynv]

Hey, sorry for my late response. But amazing work, thanks very much, I look forward to trying out the new version. You are awesome!