1 the introduction

Conclusion: Webpack5 module federation enables Webpack to achieve the effect of online Runtime, so that code can be directly shared between projects using CDN, no need to install Npm package locally, build and publish!

We know that Webpack can be shared by Common Chunk via DLL or Externals, but this task becomes difficult between different applications and projects, and it is almost impossible to hot-plug on demand between projects.

Module federation is an important new feature built into Webpack5 that allows true module sharing across applications, So this week let’s take a look at what “module federation” means with webpack-5-module-federation-a-game-Change-in-javascard-Architecture.

2 Overview & Intensive reading

NPM mode Share modules

Imagine a normal shared module, yes, NPM.

As shown in the following figure, normal code sharing requires that dependencies be installed into the project as Lib, Webpack and build, and then online, as shown in the following figure:

For projects Home and Search, the most common way to share a module is to split it into a common dependency and install it in each project.

Although Monorepo can solve the problem of repeated installation and modification to a certain extent, it still requires local compilation.

UMD mode share modules

The real Runtime approach might be to share code modules in UMD mode, where modules are packaged in Webpack UMD mode and exported to other projects. This is a very common way to share modules:

For projects Home and Search, reuse a module directly using the UMD package. However, the problem of this technical solution is also obvious, that is, package size cannot achieve the optimization effect of local compilation, and libraries are prone to conflict.

Micro front-end mode shared module

Micro-frontends (MFE) is also a popular mode of module sharing management, which aims to solve the problem of co-existence of multiple projects. The biggest problem of co-existence of multiple projects is module sharing, without conflict.

Since the micro front end also considers style conflicts and lifecycle management, this article focuses only on resource loading. Microfronds are typically packaged in two ways:

  1. Sub-applications are packaged independently and modules are decoupled, but common dependencies cannot be extracted.
  2. The whole application is packaged together, which is a good solution to the above problems, but the packaging speed is too slow, and does not have the ability to scale horizontally.

Modular federated approach

The Federated Module is one of the core features built into Webpack5:

As can be seen from the figure, this scheme directly applies the package of one application to another application, and at the same time has the common dependency extraction capability that the whole application is packaged together.

Modularized output capability of applications actually opens up a new application form, namely “central application”. This central application is used for dynamic online distribution of Runtime sub-modules and is not directly provided to users:

This diagram is a perfect master application for a micro front end, because all sub-applications can reuse the master application’s Npm packages and modules in Runtime mode for better integration into the master application.

Module federation can be used as follows:

const HtmlWebpackPlugin = require("html-webpack-plugin");
const ModuleFederationPlugin = require("webpack/lib/container/ModuleFederationPlugin");

module.exports = {
  // other webpack configs...
  plugins: [
    new ModuleFederationPlugin({
      name: "app_one_remote".remotes: {
        app_two: "app_two_remote".app_three: "app_three_remote"
      },
      exposes: {
        AppContainer: "./src/App"
      },
      shared: ["react"."react-dom"."react-router-dom"]}),new HtmlWebpackPlugin({
      template: "./public/index.html".chunks: ["main"]]}});Copy the code

The module federation itself is a common Webpack plugin ModuleFederationPlugin that has several important parameters:

  1. nameThe name of the current application must be globally unique.
  2. remotesCan be transferred to other projectsnameMap to the current project.
  3. exposesRepresents exported modules. Only modules declared here can be used as remote dependencies.
  4. sharedThe React or ReactDOM is a very important parameter that allows remotely loaded modules to have their dependencies changed to use the React or ReactDOM of the local project.

For example, if you set remotes: {app_TWp: “app_two_remote”}, you can call modules directly from the other app in your code:

import { Search } from "app_two/Search";
Copy the code

This app_two/Search comes from the configuration of app_two:

// WebPack configuration for app_two
export default {
  plugins: [
    new ModuleFederationPlugin({
      name: "app_two".library: { type: "var".name: "app_two" },
      filename: "remoteEntry.js".exposes: {
        Search: "./src/Search"
      },
      shared: ["react"."react-dom"]]}});Copy the code

Since Search is exported in an object reception, we can therefore use the [name]/[exposes_name] module, which is a local module for the referenced application.

3 summary

Module federation provides an out-of-box solution for larger front-end applications and has been built into Webpack5 as an official module, which can be said to be the final runtime code reuse solution after Externals.

In addition, Webpack5 also has a large number of compile-time caching functions. It can be seen that whether it is performance or multi-project organization, Webpack5 is trying to give its own best ideas, looking forward to the official release of Webpack5, and the front-end engineering will move to a new stage.

The discussion address is: intensive reading Webpack5 new features – module federation · Issue #239 · dt-fe/weekly

If you’d like to participate in the discussion, pleaseClick here to, with a new theme every week, released on weekends or Mondays. Front end Intensive Reading – Helps you filter the right content.

Pay attention to the front end of intensive reading wechat public account

Copyright Notice: Freely reproduced – Non-commercial – Non-derivative – Remain signed (Creative Commons 3.0 License)