延迟加载组件/动态导入 - 如何配置汇总，以便仅创建一次捆绑文件？

Question

我正在尝试延迟加载组件并为此配置汇总。我已经做了以下调整

rollup.config.js

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

index.html

而不是导入 bundle.js

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

然后在构建 main.js、main-93f53e7a.js 和 SomeComponent-5f7e94f4.js

中创建了三个文件

在功能方面这似乎可行 - 打开页面时加载两个主要文件，仅在安装组件时加载组件之一

问题是，当运行在 dev mode 中更改代码时，会为 main-*someSuffix* 和 SomeComponent-*someSuffix*[=19= 创建额外的文件]

我必须添加什么来防止这种情况发生？

Answer 1

你看到的可能是以前构建的残余。 Rollup 在开始新构建时不会清空输出目录。

您可以使用插件添加此行为，例如这个：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/**' }),
  ]
}

延迟加载组件/动态导入 - 如何配置汇总，以便仅创建一次捆绑文件？

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

rollupjs

svelte

rollup.config.js

index.html