Vendor file big and take long time to load

[AhmedSalamaM]

after build , system take long time to load and vendor file size very big 9 M what should i do ?

[tsv2013]

The vendor bundle contains all the scripts used in this application. Since the app consists from one page only, the bundle contains all the scrips and loaded at once.

In real application that contains different pages and different libraries are loaded on different pages it is possible to load scripts on-demand only when scripts are really required.

This can be achieved via webpack "dynamic import" technique for example. https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234 https://webpack.js.org/guides/code-splitting/

We're going to re-work this example: split it on several pages: home page, survey creator page, survey page and PDF export page. In this case we will be able to use dynamic import of some libraries. But this work will take some time.

[tsv2013]

At the same time on your side, in your real application you can setup webpack "dynamic import" using the articles mentioned above: https://medium.com/front-end-weekly/webpack-and-dynamic-imports-doing-it-right-72549ff49234 https://webpack.js.org/guides/code-splitting/

[tsv2013]

I've added vue-router (https://router.vuejs.org/) to the application, split the main view into Home/Survey/Creator/Export and added lazy page loading (https://github.com/vuejs/vue-router/tree/dev/examples/lazy-loading)

You are welcome to check the results