lazy loading of vue script

Question

Recently I created an admin panel using vue and laravel.

All things working correctly but one problem is that my compiled script file is almost 7mb file (i.e app.js which is located in public folder) because of this compiled script browser take to long loading time to load initial (landing page) on browser i.e it does not render page until 7mb script get downloaded in browser which is almost 1 min.

Is it possible to load initially one component at start after that according to user click load other component.

In more detail: suppose my app.js file has 1K lines of code and at start if few lines of code get downloaded

then it renders page i.e it should not wait to download complete 7mb script after that it render page.

Is there anyway to reduce this loading time . I did lots of google but haven't find any solution

You may want to look into code splitting: 3 Code Splitting Patterns For VueJS and Webpack — yuriy636
– yuriy636, Commented Feb 17, 2018 at 11:53
@yuriy636 its throw error Unexpected token when i use this const Full = () => import('./containers/Full') — Rocky
– Rocky, Commented Feb 17, 2018 at 12:11

tony19 · Accepted Answer · 2022-07-15 21:14:30Z

4

Try to use es6 dynamic import. This entry in vue document and link in vue-router may help you

In addition, 7 mb of pure JavaScript code, on my perspective, is a very complicated spa. Are you sure you minify your code and avoid bundling something like big images?

Now that you use vue-router, I suggest that you use the method described in the vue-router document, as it's based on vue component's async loading and webpack's code splitting feature.

Remember to import syntax-dynamic-import plugin to avoid the unexpected token error you mentioned above.

edited Jul 15, 2022 at 21:14

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Feb 17, 2018 at 11:27

obfish

6774 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Rocky Over a year ago

i go throw all document which you had describe so which one should i use i my application have have router. so should i use Lazy Loading Routes or component or both ?

Collectives™ on Stack Overflow

lazy loading of vue script

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related