Remote package manager based on npm and module-federation

zhanghongen

zhangHongEn

Posted on September 22, 2023

Remote package manager based on npm and module-federation

Remote package manager based on npm and module-federation

Recently I worked on a micro front-end open source project(web package manager), As the holiday approaches, I will briefly promote it, and I will continue to update after the holiday. Everyone is welcome to experience it. or star, Communication and discussion are also welcome, thank you

WPM introduce

The web package manager is a remote package manager based on module-federation (mf) and npm. Connected the existing umd specification and mf module. You can share remote modules more easily and without worries. You can easily access existing npm packages or use npm private sources and other sources to build a new remote module system.
It also has a built-in self-expandable debugging plug-in system, which can switch remote/local modules with one click, integrate hot updates, etc. to greatly improve development and debugging efficiency.

Features

  • Multi-module specifications (integrated module specifications such as system, umd, module-federation, etc.)
  • Debug mode/hot update (integrates debugging panel and hot update, can automatically connect to the locally started dev-server)
  • Version management (you can use private or public npm as the remote module storage source, or you can customize url splicing rules to store remote modules yourself)
  • Remote lock (supports dynamic configuration of remote module version)
  • Performance optimization (the plug-in automatically optimizes the loading links of multiple remote modules and their chunks to avoid waiting for multiple loads)

Improve efficiency value

I've been using wpm in my own work for two years and have only recently taken the time to decouple it. Simply put, its value lies in greatly improving development and construction efficiency as well as versioning, grayscale strategy and other management.

Image description

Image description

Technical advantages

The underlying technology uses npm + module-federation, which is more in line with the existing technology ecosystem and has the lowest access cost. To elaborate on this future, I will only briefly introduce it now. As the most complete basic capability (ts, ssr, various packaging tool plug-ins) and the most active remote module sharing and loading capabilities, module-federation can automatically be compiled by the packaging tool. Analyze how many js resource (chunk) requests should be initiated in parallel and in advance to load the next module to remove the loading waterfall. This will also bring performance improvements that cannot be achieved by introducing remote modules during manual coding runtime.

可以独立使用的底层能力

When I was working on wpm, I also made many other libraries to solve some problems.

Recent plans

At present, the open source version exposes about 60% of the capabilities. I will continue to update after the vacation.

  1. Documentation, examples, development specifications, contribution guide supplement
  2. wpm plugin supplement
  3. Built-in hot update integration
  4. Articles (wpm introduction, module-federation features and performance analysis)
💖 💪 🙅 🚩
zhanghongen
zhangHongEn

Posted on September 22, 2023

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related