arkokoley/pdfvuer

Reduce size / pdfjs as peer dependency?

mesqueeb opened this issue · 12 comments

I'm working on reducing my bundle size and PDFVuer is about the biggest dependency I have.
Does it include PDFJS? Because I also seem to have PDFJS as bundle separate from PDFVuer...

Screenshot 2021-08-01 at 14 34 12

Screenshot 2021-08-01 at 14 34 04

hmm, it seems to be external in that UMD file... I wonder why PDFvuer is so big then...
image

I was packaging pdfjs with pdfvuer. This is removed in v1.9.1. Please try that out.

@arkokoley I tried 1.9.1 today, but I get this error:


 ERROR  Failed to compile with 1 errors                                                                                                                                                                                                                                                                             1:53:40 PM

This dependency was not found:

* -!../../css-loader/dist/cjs.js??ref--6-oneOf-2-1!../../vue-loader/lib/loaders/stylePostLoader.js!../../postcss-loader/src/index.js??ref--6-oneOf-2-2!../node_modules/pdfjs-dist/web/pdf_viewer.css in ../node_modules/css-loader/dist/cjs.js??ref--6-oneOf-2-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src??ref--6-oneOf-2-2!../node_modules/@quasar/app/lib/webpack/loader.auto-import-client.js?kebab!../node_modules/vue-loader/lib??vue-loader-options!../node_modules/pdfvuer/src/Pdfvuer.vue?vue&type=style&index=0&id=02133f2b&scoped=true&lang=css&

To install it, you can run: npm install --save -!../../css-loader/dist/cjs.js??ref--6-oneOf-2-1!../../vue-loader/lib/loaders/stylePostLoader.js!../../postcss-loader/src/index.js??ref--6-oneOf-2-2!../node_modules/pdfjs-dist/web/pdf_viewer.css

I think it's because you made the Vue file the "main" file in package.json and there must be something not working with this:
https://github.com/arkokoley/pdfvuer/blob/master/src/Pdfvuer.vue#L244

it might have to do because I use yarn workspaces.

You can also look into https://github.com/egoist/vue-compile I think it might grab that node_modules css file and include it into the Vue component on compile.

I tried a couple of things, but it only worked for me to edit you Pdfvuer.vue file in my node_modules and replace the CSS import line with the actual CSS of pdfjs-dist.

Then it also relied on some images, so I had to move those images to my public folder and update the css url() section to point there instead.

@arkokoley should I open a new issue for this?

I had fixed this last night in v1.9.2 please try that out.

@arkokoley can you sync your commits here as well? then I can look at the changes

@arkokoley for me the size of pdfvuer is now very tiny:
image

However...

pdfjs-dist is a bit bigger now on 1.9.2 than before:

image

I'm happy that the total of the two has come down though!

Any idea for limiting what gets imported of pdfjs-dist ? I removed the line where we manually needed to import it as per your readme.

@mesqueeb Unfortunately that is how the pdfjs lib is organised. I have tried out a bunch of ways but I'm unable to reduce it any further. If you find a way, PRs are always welcome! :D

@mesqueeb Please consider sponsoring me if pdfvuer has been really helpful for you!

In version 2.0.1 pdfjs is listed as a dependency:

"pdfjs-dist": "2.5.207",

Will this be removed, so that it becomes a peer dependency?