8000 Optimize Webpack configuration - Code splitting · Issue #52 · LabHive/LabHive · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Optimize Webpack configuration - Code splitting #52

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.

Sign up for GitHub

By clicking “ 8000 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

Jump to bottom
Open
Kavakuo opened this issue Apr 16, 2020 · 2 comments
Open

Optimize Webpack configuration - Code splitting #52

Kavakuo opened this issue Apr 16, 2020 · 2 comments
Labels
enhancement New feature or request

Comments

@Kavakuo
Copy link
Member
Kavakuo commented Apr 16, 2020 •
edited
Loading

The code of the application should be splitted across multiple JS files, to improve loading times. So that only the code is loaded that is currently needed.

I think the easiest solution would be to implement code splitting based on the routes.
One article that describes how to implement this, is available here.
@Kavakuo Kavakuo changed the title Optimize Webpack configuration Optimize Webpack configuration - Code splitting Apr 16, 2020
@Kavakuo Kavakuo added this to the MVP - Launch milestone Apr 16, 2020
@Kavakuo Kavakuo added the enhancement New feature or request label Apr 16, 2020
@andrei-serban
Copy link
Collaborator

Done here: #96

@Kavakuo
Copy link
Member Author
Kavakuo commented Apr 29, 2020 •
edited
Loading

Ok, did some investigations. The changes from #96 work as expected, but the entry point of the application is still too large.

To run the application without cache a 642KB blob is needed, containing the vue runtime and the bootstrap stuff. The problem is, that this blob contains ALL bootstrap components, no matter if they are needed or not.
The bootstrap part alone is already 400KB large.

Instead of importing the whole bootstrap library globally, we should only import components that are actually needed... This will require some work, but we should benefit from smaller builds.
https://bootstrap-vue.org/docs/#component-groups-and-directives-as-vue-plugins

To get an idea how large the application is, set the speed limiter in the dev tools of chrome to "fast 3G" and try to load the site, ideally the production build served from a local web server...

I added the webpack-bundle-analyzer to the Vue config on the lazy-load branch, so that we can actually see how the bundles are split up and what is inside.

@Kavakuo Kavakuo removed this from the MVP - Launch milestone May 5, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
enhancement New feature or request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@andrei-serban @Kavakuo
0