使用共享依赖
掌握在联邦化应用之间高效共享常用库和依赖的方法。
使用共享依赖 是 CoddyKit 上的免费 Micro Frontends Architecture with Module Federation 课时。 这是第 1 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 Micro Frontends Architecture with Module Federation 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 Micro Frontends Architecture with Module Federation 课程共包含 4 节课。
本课时的部分内容尚未翻译，以英文显示。
Why Share Dependencies?
In Micro Frontends, different parts of your application might use the same libraries, like React, Vue, or Lodash. Without careful management, each Micro Frontend could bundle its own copy of these libraries.
This means users would download the same code multiple times, increasing load times and wasting bandwidth. Sharing dependencies solves this problem!
The Problem: Duplicate Bundles
Imagine your main 'Host' application uses React, and a 'Remote' Micro Frontend also uses React. If both bundle React independently, your user's browser ends up downloading React twice.
- Host Bundle: Includes React
- Remote Bundle: Includes React (again!)
This leads to larger overall application sizes and slower performance.
Module Federation's Solution
Webpack's Module Federation offers a powerful solution: the shared configuration. It allows you to declare common libraries that should be shared across your federated applications.
Module Federation then ensures these libraries are loaded only once, even if multiple Micro Frontends depend on them.
Configuring `shared`
You define shared dependencies within the ModuleFederationPlugin in your webpack.config.js file. The shared property is an object where each key is the name of a module you want to share.
Here's a basic look at how it's structured:
new ModuleFederationPlugin({
// ... other configs
shared: {
// 'module-name': { options }
'react': { /* ... */ },
'react-dom': { /* ... */ }
}
})Sharing with `requiredVersion`
The requiredVersion option is crucial for compatibility. It specifies the acceptable version range for a shared dependency using semantic versioning (e.g., ^18.0.0).
Module Federation will try to use a compatible version already loaded; if none exists or it's incompatible, it will load a new one.
shared: {
react: {
requiredVersion: '^18.0.0',
// other options like singleton: true
},
'react-dom': {
requiredVersion: '^18.0.0'
}
}The `eager` Property Explained
Normally, shared modules are loaded asynchronously, on demand. However, sometimes a shared module is needed immediately at startup, before any remote modules are even requested.
For such cases, you can use the eager: true option. Be cautious, as this can impact initial load performance by forcing the module to load upfront.
shared: {
'my-critical-lib': {
requiredVersion: '^1.0.0',
eager: true // Load this module immediately
}
}Host & Remote `shared` Configs
Both your host and remote applications should typically define the same common libraries as shared. This tells Module Federation that these dependencies are part of the shared pool.
Module Federation then orchestrates which application actually loads the dependency and makes it available to others, ensuring only one copy exists in the browser.
Practical Use of Shared Deps
When react and react-dom are configured as shared, your application code can simply import them as usual. Module Federation handles the underlying logic to ensure they are loaded efficiently and only once.
This minimal React entry point demonstrates how standard imports leverage shared dependencies:
import React from 'react';
import ReactDOM from 'react-dom/client';
// This is a minimal React app entry point.
// If 'react' and 'react-dom' are shared in Module Federation,
// these imports will efficiently use a single instance.
function App() {
return (
<div>
<h1>Shared Dependencies Demo</h1>
<p>This app uses React, which can be shared!</p>
</div>
);
}
const rootElement = document.getElementById('root');
if (rootElement) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
} else {
console.error("Root element not found!");
}Benefits of Sharing Libraries
- Smaller Bundle Sizes: Prevents common libraries from being duplicated across different Micro Frontends, directly reducing the total amount of code users download.
- Improved Performance: Less code to download, parse, and execute means faster initial page load times and a more responsive user experience.
- Consistent Versions: Helps ensure all parts of your federated application use the same version of a library, reducing potential conflicts and unexpected behavior.
Shared Dependencies Check
Module Federation's shared configuration is crucial for efficient Micro Frontends. Which option correctly describes a key benefit of using shared dependencies?
Recap & Next Steps
We've learned how Module Federation's shared configuration is vital for optimizing Micro Frontends. By defining common libraries as shared, you prevent them from being bundled multiple times.
This leads to smaller initial load times, better performance, and more consistent dependency versions across your federated applications.
Next, we'll dive deeper into managing Singleton Modules & Versioning to ensure robust shared dependency handling.
常见问题解答
「使用共享依赖」课时是免费的吗？
是的 — 「使用共享依赖」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 Micro Frontends Architecture with Module Federation 课程的其余内容，请升级到 CoddyKit PRO。 Micro Frontends Architecture with Module Federation 课程共包含 4 节课。
「使用共享依赖」这节课中我会学到什么？
掌握在联邦化应用之间高效共享常用库和依赖的方法。 你通过在浏览器中直接运行的动手代码来练习 Micro Frontends Architecture with Module Federation，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 Micro Frontends Architecture with Module Federation 需要有经验吗？
无需任何先前经验。CoddyKit 上的 Micro Frontends Architecture with Module Federation 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 1 节课，共 4 节。
「使用共享依赖」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 Micro Frontends Architecture with Module Federation 课中编写并运行代码吗？
能。每节 Micro Frontends Architecture with Module Federation 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。