Imports loaded every time when a component is mounted?

Question

assume I have a Vue component that I use multiple times on a page. Sometimes it is loaded asynchronously:

Are all imports from this component added each time?

For example, if I use

import debounce from 'lodash/debounce';

export default {
    name: 'Test',
    ...
}

<template>
  <div>
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
    <Test />
       ...
  </div>
</template>
<script>
    import test from 'components/test';

    export default {
        ...
    }
</script>

will lodash/debounce be reloaded every time (and therefore consumes RAM and traffic) when I mount the component e.g. 20x on a page?

Answer 1

No, you can try building your app and notice that you'll get a vendor.js bundle and probably other bundles with the rest of your application depending on how the code splitting is configured. Lodash and other node modules libraries will be loaded first when that vendor file is loaded and then all components will use those dependencies without reloading them because they're already loaded and in memory.