Webpack代码是否在switch语句中拆分未使用的代码?
我有一个Icon组件，其中有一个switch语句来选择所选的图标。这是代码的简化版本，实际上它将是一个相当大的文件:
switch (name) {
case 'tick':
return (
<svg>
<!-- more SVG code -->
</svg>
);
case 'close':
return (
<svg>
<!-- more SVG code -->
</svg>
);
如果我在具有tick条件的页面上使用此组件一次，close的代码也会被加载吗?
没有。它不会。Webpack唯一可以执行的代码消除是它可以通过摇树。摇树在模块级工作，并消除未使用的导出如果模块是副作用免费的。你所希望的是在分支机构层面积极消灭。到目前为止，没有任何东西可以执行这样的优化。你可以探索闭包编译器，但我仍然怀疑。
为了设计一个图标系统，我通常会有一个带有外部<svg>标签的图标组件，在其中我将使用在某些字典(地图或传统对象)中定义的图标片段。这就解决了大开关柜的可读性问题。