Decrease package size

[elyse0]

When I create a 'build' version of my Vue app ,I usually get the alert 'entry point size limit' but I kept ignoring it. 😆

But today I decided to look into why... so I used 'vue-cli-service build --report' and got this image

I don't know why is that big, we're not importing all functions of that package... 🤔

Any ideas on how to decrease the package size?

[elyse0]

I used route lazy-loading and helped a lot but I still think its size is huge 🤔

[LuisEnMarroquin]

I think it won't be possible currently because xlsx library in on a single file, so we will have to import it complete

Otherwise we could import the functions like this

import writeFile from 'xlsx/writeFile'

[LuisEnMarroquin]

Another idea is to use something like @vercel/ncc so we can bundle everything to a single file and we won't need to add xlsx as a devDevendency. Do you think that's a good idea? 🤔

[elyse0]

import writeFile from 'xlsx/writeFile'

Yeah, I think this could help a lot because they've recently added support for ES modules 😮 . See: SheetJS/sheetjs#2033

The only detail is that we need to import from "xlsx.mjs"

I will try it and see if it works 🐞

[elyse0]

Another idea is to use something like @vercel/ncc so we can bundle everything to a single file and we won't need to add xlsx as a devDevendency. Do you think that's a good idea? thinking

I think its a good idea! If someone is using this package, probably just needs to export json-as-excel and not all of the functions of 'xlsx' 🤔

[elyse0]

I got these stats using vue-cli-service build --report for the vue app that you deploy

• Current stat size xlsx (1.44 MB)

• Stat size using xlsx/xlsx.mjs (798 KB)

• Stat size using xlsx/dist/xlsx.mini.min (222 KB)

The smallest is xlsx.mini.min.js, all tests are passing but I still don't know which functionalities could be missing 🤔

Would be interesting to know if @vercel/ncc can improve it ^-^

[LuisEnMarroquin]

Hi there, I created branch vercel-ncc with ncc demo, it looks that's not the way we should go (925 KiB)

• https://github.com/LuisEnMarroquin/json-as-xlsx/tree/vercel-ncc

$ npm run build && npx vue-cli-service build --report

> [email protected] build
> rm -f index.js && npx -p @vercel/ncc ncc build index.ts --out . --minify

ncc: Version 0.32.0
ncc: Compiling file index.js into CJS
ncc: Using [email protected] (local user-provided)
983kB  index.js
983kB  [5698ms] - ncc 0.32.0

-  Building for production...
 WARNING  Compiled with 3 warnings4:35:47 PM

 warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/app.f2d36b97.js (925 KiB)
  js/chunk-vendors.6c6cfda0.js (693 KiB)

 warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  app (1.58 MiB)
      js/chunk-vendors.6c6cfda0.js
      css/app.b50d6a18.css
      js/app.f2d36b97.js


 warning

webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

  File                                 Size               Gzipped

  dist\js\app.f2d36b97.js              924.59 KiB         329.72 KiB
  dist\js\chunk-vendors.6c6cfda0.js    693.15 KiB         210.29 KiB
  dist\css\app.b50d6a18.css            0.30 KiB           0.23 KiB

  Images and other types of assets omitted.

 DONE  Build complete. The dist directory is ready to be deployed.
 INFO  Check out deployment instructions at https://cli.vuejs.org/guide/deployment.html

Probably the best idea will be to use xlsx.mini.min.js, do you agree?

A question, how do you generate the stats as images? 🤔

[elyse0]

Yeah, it's the smallest one. I'll make that PR 😄

I use vue-cli-service build --report 🐛 It creates report.html inside dist/ that I can open in my browser

[elyse0]

Typescript is complaining because 'xlsx.mini.min' doesn't have types 😠 The simple fix is copying the types from xlsx and create a module, but I will search if there's a cleaner solution

[elyse0]

Typescript is complaining because 'xlsx.mini.min' doesn't have types angry The simple fix is copying the types from xlsx and create a module, but I will search if there's a cleaner solution

Long story short, we need to copy them 😞

[LuisEnMarroquin]

Well, if it does the trick is fine🤗

I'll close this and merge the PR, thanks 💝