Audit code and reduce build size

[brylie]

While building the Chooser as a component, there are several asset size limit warnings, such as the following:

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: license-chooser.min.js (1.75 MiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: license-chooser (2.51 MiB) license-chooser.js

Task

• [ ] audit the chooser codebase to look for any code or dependencies that can be removed to reduce the bundle size
• [ ] determine if an alternative project configuration, such as tree-shaking, might be implemented to reduce bundle size
• [ ] discuss findings to determine which changes to make
• [ ] make desired changes to reduce bundle size

[DanielGraham123]

Hello @brylie, I'm working on this issue...

[PeaceOffiong]

I will be working on this issue

[JeffyDave]

Hi @PeaceOffiong , I would love to assist you in working on this if you do not mind.

[Cronus1007]

@possumbilities @TimidRobot Shall I pick up this issue?

[possumbilities]

@Cronus1007 feel free to tackle it, and thankyou! ❤️

[Cronus1007]

@possumbilities Unused dependencies which I was able to find are

1. bulma
2. core-js
3. sass
4. clipboardy
5. eslint-plugin-prettier

While running npm run build-component it gives

warning

asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: license-chooser.min.js (1.25 MiB)

warning

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance. Entrypoints: license-chooser (1.79 MiB) license-chooser.js

Screenshots

[possumbilities]

@Cronus1007 I could be wrong, but could you provide more info. It seems like several of those are in use in the dependency chain somewhere.

I thought clipboardy was how the clipboard copy works within the Chooser. I thought the sass and bulma dependencies are necessary for the app/site since it's utilizing Vocabulary.

The other two I'm not sure on. Is there some kind of output or report indicating that they are indeed not used at all?

[Cronus1007]

@possumbilities I used the npm dependency i.e. depcheck for checking the unused dependencies. It listed several dependencies and then I went through the codebase checking out the dependencies used which took me to this conclusion. Also when I ran the project after removing these dependencies it went well. Both the serve script and build script were working as previously. I don't think any functionality has been broken due to this.

I have a solution for this let me create a branch and commit my changes you could have a look at the build of that branch and if you feel that some functionality has been broken then we can revert everything. Right now I am working on treeshaking in order to reduce the build size as well.

[possumbilities]

@Cronus1007 that's a good idea, I'm happy to test the branch

[Cronus1007]

@possumbilities Sure I am on it.

[Pursottam6003]

I would like to work on it @possumbilities if its possible please assign me