Lazy loaded Component / dynamic import - how to configure rollup, so bundled files are only created once?

user_15388872 0
Viewed 527

I'm trying to lazy load a Component and configure rollup to do so. I already made following adjustments

rollup.config.js
export default {
    output: {
        format: 'es', // before ->  'iife'
        dir: 'public/build' // before ->  file: 'public/build/bundle.js'
    }
}
index.html

instead of import bundle.js

<script defer type="module" src='/build/main.js'></script>

There are then three files created inside build main.js, main-93f53e7a.js and SomeComponent-5f7e94f4.js

Functionality wise this seems to work - the two main files are loaded when opening the page, the one of the component only when the component is mounted

The problem is, that when running this in dev mode and changing something in the code, additional files are created for main-*someSuffix* and SomeComponent-*someSuffix*

What do I have to add to prevent this?

rollupjs svelte
1 Answers

What you see are probably the remnants of the previous build(s). Rollup does not empty the output directory when it starts a new build.

You can add this behaviour with a plugin, for example this one: rollup-plugin-delete.

rollup.config.js

import del from 'rollup-plugin-delete'

export default {
  input: 'src/index.js',
  output: {
    dir: 'dist',
    format: 'es'
  },
  plugins: [
    del({ targets: 'dist/**' }),
  ]
}
user_13875190
Related