Frequently Asked Questions

My bundling process slowed down significantly with React-PDF. What can I do?

Some performance decrease after React-PDF is added to your bundle is inevitable. React-PDF uses Mozilla's PDF.js which weighs around 1800 kb before compression.

Here are several things you can do to improve this. We're using React-PDF sample page as a benchmark.

Ensure you're using the most up to date version of Node.js and bundler

Newest versions of Node.js can significantly improve performance of bundlers like Webpack. It works the other way around, too: bundlers like Webpack take advantage of some tricks Node.js can do in the newest versions. It's a good idea to keep them both up to date.

Make use of multi-process minifying in UglifyJsPlugin

With parallel option in UglifyJsPlugin, you can use multiple processor cores to do the minifying. This speeds up bundling process by quite a bit.

new webpack.optimize.UglifyJsPlugin({
+  parallel: true,
}),

Enable cache in UglifyJsPlugin

PDF.js files remain unchanged between builds, so it won't hurt to use caching to prevent UglifyJsPlugin from doing the same job over and over again. This speeds the second and all the next builds.

new webpack.optimize.UglifyJsPlugin({
+  cache: true,
}),

When I'm trying to load a PDF file from an external source, I'm given a message "Failed to load PDF file.".

If you are sure the URL to the external source you're trying to load is correct, most likely you are experiencing effects of Same-origin Policy. In order to load files from domains other than your own you can do the following:

• Ask domain owner to include your domain in Access-Control-Allow-Origin HTTP header.
• Use a server side-proxy that will go around Same-origin policy limitations (beware: that is a potential security issue, so be sure you know what you're doing before creating one).