如何仅从组件动态导入JS并仍然拆分其资产？

问题描述

我有一个由输入脚本文件动态导入的组件：

let button: HTMLButtonElement;

button = document.querySelector("#myButton") as HTMLButtonElement;

button.addEventListener('click',async () => {
  
  const { 
    default: Greeter 
  } = await import(
    /* webpackChunkName: "greeter" */ 
    '../shared/greeter/greeter'
  );

  new Greeter('Hello,govner!');
});

当用户单击按钮时，将加载所有组件脚本和样式。

虽然可行，但不是很好，因为我需要静态呈现组件样式，因此在用户单击按钮之前，页面样式不会损坏。

解决方案是导入组件样式以及此输入脚本文件：

import './index.scss';
import './greeter.scss';

产生的结果：

• 组件样式与页面的其余部分一起静态加载；
• 当他们/如果他们按下按钮，那么他们将具有行为组件。

尽管如此，它将两个样式表仅编译为一个文件：index.[contentHash].css。

不好！原因是：

• 文件大小；
• 无法正确实现缓存清除。

我期望的是

• 拆分样式表；
• 自动将组件对应的样式表注入HTML；
• 动态加载组件脚本。

这样可以：

• 文件较小；
• 仅在更新的样式块上执行缓存清除。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）