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

2.0 1.0
configuration Unified configuration Based on the webpack chain
Build, compress Rust [compression with bug rollback, follow up switch] js
Micro front-end emp share module federation
esm ✔ ️ ❌
Esm Shared ✔ ️ ❌
Library mode ✔ ️ ❌
Multi-page mode ✔ ️ ❌
D. ts synchronous assistance One piece generates synchronization Need plug-in intervention

Speed comparison

2.0 EMPShare 1.0 the Module Federation ascension
Antd 800ms 16s 20 times

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