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.