问题现象#

• 开发环境初始化加载 6000+ chunks
• 本地服务冷启动耗时增加约30秒
• 生产构建不受影响

排查过程#

先观察异常请求的特征#

通过 Network 面板发现大量 <5kb 的 chunk 请求，点开响应可以看到包含 @tabler 关键字。

从依赖上溯源#

在 @tabler/[email protected] 的源码中发现他是通过动态导入的方式加载所有图标的：

var dynamicImports = {
  "a-b-2": () => import('./icons/IconAB2.mjs'),
  // ...
}

export { dynamicImports as default };

import() 属于动态导入，对于每一个导入的内容，vite 都会创建出一个独立的 chunk，到这里还不能说完全有问题，关键在于他使用 dynamicImports 的地方：

import * as dynamicImports from './dynamic-imports.mjs';

export { dynamicImports };

在 tabler 这个依赖的入口文件 tabler-icons-react.mjs 中，他将 dynamicImports 给直接导入导出了，就意味着你如果导入了 @tabler/icons，在开发环境下，vite 分析依赖的时就会把相关的的模块全都加载进来。

根据 issue 的记录，这个写法是为了支持动态加载图标而加入的，就是 <Icon name={iconName} /> 这种场景，但 pr 提供者似乎完全没有考虑到使用 vite 构建工具的情况。

解决方案#

我这里想到、收集到的总共三种：

// vite.config.js
export default {
  resolve: {
    alias: {
      '@tabler/icons-react': 'node_modules/@tabler/icons-react/dist/esm/icons/index.mjs'
    }
  }
}