Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Clean up dependencies #315

Closed
stefandesu opened this issue Mar 21, 2019 · 6 comments
Closed

Clean up dependencies #315

stefandesu opened this issue Mar 21, 2019 · 6 comments
Labels
cleanup code cleanup, refactoring, testing...

Comments

@stefandesu
Copy link
Member

Cocoda has too many dependencies, causing the app bundle to be pretty big. Analyze which dependencies take up most of that space and find a way to remove them.

@stefandesu stefandesu added the cleanup code cleanup, refactoring, testing... label Mar 21, 2019
@stefandesu stefandesu added this to the 0.9.0 milestone Mar 21, 2019
@stefandesu
Copy link
Member Author

stefandesu commented Mar 27, 2019

Using source-map-explorer, I analyzed our Webpack vendors file. Here's a screenshot of that analysis:

Screen Shot 2019-03-27 at 09 24 22

You can see where we can easily improve our bundle size:

  • Only import those font-awesome icons that we actually use.
  • Only import lodash functions that we actually use.
  • Figure out a way to reduce bootstrap-vue imports, or use only the CSS but not the JavaScript from bootstrap-vue (see this).
  • Do we actually need validation for JSKOS objects in Cocoda? ajv surprisingly takes almost 100 KB. Alternatively we could move JSKOS validation to an API. See comments below for more discussion.
  • Why is vue-flexible-table so big? It has zero dependencies and shouldn't take up 21 KB. Same issue with some other modules. (Something to do with ES6 modules?)

Just by addressing the first two points, we can reduce the bundle size by over 1 MB.

@stefandesu
Copy link
Member Author

Just the font-awesome thing reduced the bundle size from around 2 MB to around 1 MB. I think it would be good to reduce the size further to a maximum of 500 KB, but that's not a priority.

@nichtich
Copy link
Member

JSKOS validation is only required in the dev branch, isn't it?

@stefandesu
Copy link
Member Author

stefandesu commented Mar 28, 2019

So far, I wasn't able to find a way to conditionally import a module when using Vue.js. I'm sure there's some solution using Webpack, but there doesn't seem to be a simple way to do it. Also, I just noticed that validation is included in jskos-tools, meaning that we either have to split off validation into its own package again, or just live with it.

I'm still surprised that it takes up around 100 KB, it feel like it should be a lot less than that...

Edit: The minified browser version of ajv is also 120 KB in size, so we can't do anything about that. We could use djv instead which seems to be only around 30 KB in size, but I'm not sure what the differences are.

stefandesu added a commit that referenced this issue Apr 3, 2019
@stefandesu
Copy link
Member Author

Update: Using babel-plugin-lodash, I was able to reduce the size of lodash without any effort. It only saved 30 KB or so, but better than nothing. Here's a current image for the dependency sizes:

Screen Shot 2019-04-03 at 08 08 36

@stefandesu stefandesu modified the milestones: 0.9.0, 2.0.0 Apr 3, 2019
@stefandesu
Copy link
Member Author

Moved this to 2.0.0 because the changes resulting in the biggest effect are already implemented.

stefandesu added a commit that referenced this issue Apr 3, 2019
@nichtich nichtich closed this as completed Apr 4, 2019
@stefandesu stefandesu removed this from the 2.0.0 milestone Oct 12, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
cleanup code cleanup, refactoring, testing...
Projects
None yet
Development

No branches or pull requests

2 participants