メニュー
Teaches static ES2015 import syntax for module dependencies. Use when you need to import code that is required at load time and benefits from static analysis and tree shaking.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/PatternsDev/skills --skill static-importコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
Teaches the command pattern for decoupling task execution from invocation. Use when you need undo/redo functionality, queued operations, or want to decouple the object that invokes an operation from the one that performs it.
Teaches the proxy pattern for intercepting object operations. Use when you need validation, logging, formatting, or access control on property access, assignment, or function invocation.
Teaches the Higher-Order Component (HOC) pattern for logic reuse. Use when you need to share cross-cutting concerns like authentication, logging, or data fetching across multiple components.
SOC 職業分類に基づく
SKILL.md を表示中
| name | static-import |
| description | Teaches static ES2015 import syntax for module dependencies. Use when you need to import code that is required at load time and benefits from static analysis and tree shaking. |
| paths | ["**/*.js","**/*.ts"] |
| license | MIT |
| metadata | {"author":"patterns.dev","version":"1.1"} |
| related_skills | ["module-pattern","singleton-pattern"] |
The import keyword allows us to import code that has been exported by another module. By default, all modules we're statically importing get added to the initial bundle. A module that is imported by using the default ES2015 import syntax, import module from 'module', is statically imported.
Let's look at an example! A simple chat app contains a Chat component, in which we're statically importing and rendering three components: UserProfile, a ChatList, and a ChatInput to type and send messages! Within the ChatInput module, we're statically importing an EmojiPicker component to be able to show the user the emoji picker when the user toggles the emoji.
The modules get executed as soon as the engine reaches the line on which we import them.
Since the components were statically imported, Webpack bundled the modules into the initial bundle:
Asset Size Chunks Chunk Names
main.bundle.js 1.5 MiB main [emitted] main
Our chat application's source code gets bundled into one bundle: main.bundle.js. A large bundle size can affect the loading time of our application significantly depending on the user's device and network connection. Before the App component is able to render its contents to the user's screen, it first has to load and parse all modules.
Luckily, there are many ways to speed up the loading time! We don't always have to import all modules at once: maybe there are some modules that should only get rendered based on user interaction, like the EmojiPicker in this case, or rendered further down the page. Instead of importing all component statically, we can dynamically import the modules after the App component has rendered its contents and the user is able to interact with our application.