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 (ie 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 ie 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 ie 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

Answer 1

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.