关于 static-import
介绍 JavaScript 静态导入的开发技能，说明模块如何进入初始打包产物，以及何时考虑动态导入。适合构建 Web 应用并需要权衡初始渲染与加载体积的开发者。
主要功能
- 01说明静态导入的执行时机
- 02解释模块如何进入初始包
- 03区分首屏关键模块与延迟模块
适用场景
- 01选择首屏渲染所需模块
- 02评估静态导入对包体积的影响
安装
复制下面的命令，在终端中运行。
$
npx skills add https:/安装后在 Claude Code 中输入/static-import确认已加载。
详细介绍
静态导入
import 关键字允许我们导入由其他模块导出的代码。默认情况下，所有_静态导入_的模块都会添加到初始捆绑包中。使用默认 ES2015 导入语法 import module from 'module' 导入的模块，就是静态导入的。
来看一个例子！一个简单的聊天应用包含一个 Chat 组件，其中静态导入并渲染了三个组件：UserProfile、ChatList 和 ChatInput，用于输入并发送消息！在 ChatInput 模块中，我们静态导入了一个 EmojiPicker 组件，以便在用户切换表情选择器时显示它。
何时使用
- 用于导入页面加载时立即需要的模块
- 这是默认的导入机制——了解它，才能知道何时切换为动态导入
说明
- 对初始渲染至关重要的模块应使用静态导入
- 请注意，所有静态导入的模块都会打包到初始捆绑包中
- 对于初始渲染时不需要的模块，可以考虑改用动态导入
详情
当引擎执行到导入模块的那一行时，这些模块就会立即执行。
由于这些组件是静态导入的，Webpack 将这些模块打包到了初始捆绑包中：
Asset Size Chunks Chunk Names
main.bundle.js 1.5 MiB main [emitted] main
聊天应用的源代码会被打包到一个捆绑包中：main.bundle.js。捆绑包过大可能会显著影响应用的加载时间，具体取决于用户的设备和网络连接。在 App 组件能够将内容渲染到用户的屏幕上之前，必须先加载并解析所有模块。
幸运的是，有很多方法可以加快加载速度！我们不必总是一次性导入所有模块：有些模块可能只应在用户交互时才渲染，例如本例中的 EmojiPicker；也有些模块可能只会在页面较下方渲染。我们可以不静态导入所有组件，而是在 App 组件渲染完内容、用户能够与应用交互之后，再_动态_导入这些模块。
来源
评论
支持 Markdown