EMP 2.0 – Building a complete microcomponentized ecological closed loop

background

After two years of development and 21 beta iterations, we settled on the release of EMP V2 to address a few issues

• webpack5The overall packaging volume is too slow and caching enabled does little to solve the current problem
• module federationinvolvessingle 与 eagerHorizontal sharing increases volume and build complexity
• The configuration of the project is too loose, which is not conducive to subsequent iterations
• typescript,tsconfig,dtsImplementation too crude
• With the frontCross frame, stateThe solution confusion is serious, and the subsequent coordination of microcomponents,EMPProject decoupling is addressed rather than multi-system aggregation

transform

• The introduction ofswcReplace Babel with Webpack5 for a more impressive acceleration, rewrite the Loader, let build better customizationFor ESM, we will consider introducing ESbuild for further upgrade
• The introduction ofEMPShareThe three-level shared model replaces the traditional onemodule federationLogic plays a qualitative role in CDN hits, volume, and build speed
• supportESMThe development of
• Multi-page configuration support, support configuration inheritance
• Deep typescript-based customization features such astsconfig.jsonSynchronously integrate with type into EMP

EMPShare

Standing group of architecture

Version of the contrast

Speed comparison

The project of ecological

start

• Development of the document

The installation

npm add @efox/emp --dev
yarn add @efox/emp -D
pnpm add @efox/emp -D
Copy the code

instruction

"scripts": {
  "init": "emp init",
  "dev": "emp dev --env dev",
  "build": "emp build --env prod",
  "build:ts": "emp build --env prod -t",
  "start": "emp serve",
  "analyze": "emp build --analyze"
},
Copy the code

emp init

Create EMP Template project Currently available templates:

• vue2_base
• vue2_project
• react_base
• react_project

conclusion

• Thanks to thewebpackUpdate andswcThe overall project model can be deepened and evolved, more in line with the multi-person development and sharing of the model.
• Thanks to the feedback from the project and the community and the collection of opinions, we saw more possibilities
• Finally, thanks to the students who have grown up with us, the annual summary from 2021

The author

Ken

Related guide

• EMP open Source microfront-end solution for the future
• Micro Front-end Emp 2020
• Happy Chameleon Review 2020