Why are imported .js files duplicated in nested .vue components?

  • I have made a small app with about 10 custom components that are in .vue files. Some components however need to use a very big library (mapbox-gl). I did this by doing 'import * as mapboxgl from ‘mapbox-gl’ in these.vue files.

    Some other .vue files however need to use these mapbox-components.

    It looks to me that each .vue file ends up in its own .js file in ‘dist/js’, is that correct? All these files are huge, so it looks like each time the entire mapbox-gl.js is included for each .vue file that includes mapbox-gl directly or even uses a component that does!

    This seems very inefficient, is there a better way to do this ?

  • This would be a webpack issue. The expected behavior is the library being loaded and added to the bundle only once.

  • i didn’t change anything in the default webpack configuration. By using webpack-bundle-analyzer, I can see that indeed in each generated js file the entire mapbox-gl.js is included. When I disable the import of the component that uses mapbox-gl inside the other components, these files are MUCH smaller, so it’s entirely because of doing the import. Am I doing something wrong? Are vue components that are used by other components maybe not meant to import big libraries?

  • I think the question is better suited to stackoverflow. But do let us know if you find a solution.

Log in to reply

Looks like your connection to Quasar Framework was lost, please wait while we try to reconnect.