微前端和webpack5（供自学）

野渡_
1,564 阅读4分钟

微前端概述（应用拆分）

微前端（Micro-Frontends）是一种类似于微服务的架构，它将微服务的理念应用于浏览器端，即将 Web 应用由单一的单体应用转变为多个小型前端应用聚合为一的应用。

微前端的出现主要是为了解决如下下的痛点：

  1. SPA页面庞大和难以维护，故要进行解耦拆分，每个部分单独维护和部署，提升效率；
  2. 系统历史的原因导致的老久，微前端可以很好的兼容新老系统；

这里边有一个问题关键，如何多个应用项目共享一些资源，以往可能是以npm包的形式，但是这样方式肯定是存在不足的

  1. npm包的更新流程繁琐复杂
  2. 构建速度慢。（vendors的多次引入）
  3. npm迭代更新的话 需要修改的太多了 npm：

image.png 微前端：

image.png 微前端可以看的文章： zhuanlan.zhihu.com/p/78362028 zhuanlan.zhihu.com/p/95085796

微前端常见方案：

image.png

image.png

why not ifame:www.yuque.com/kuitos/gky7…

web component:

image.png

微前端要解决的问题：

路由切换的分发：

关键就是建立子应用和路由之间的映射；通过h5提供的history.pushState、history.replaceState 以及popstate，捕捉路由变化；捕捉到对应的子应用之后，把页面渲染到某个节点下；

主微应用的隔离：

这里的隔离主要是指微应用和主应用之间的js执行环境的隔离和css样式隔离；

css样式隔离：当主应用和微应用同屏渲染时，就可能会有一些样式会相互污染，如果要彻底隔离CSS污染，可以采用CSS Module 或者命名空间的方式，给每个微应用模块以特定前缀，即可保证不会互相干扰，可以采用webpack的postcss插件，在打包时添加特定的前缀。 而对于微应用与微应用之间的CSS隔离就非常简单，在每次应用加载时，将该应用所有的link和style 内容进行标记。在应用卸载后，同步卸载页面上对应的link和style即可。 js隔离：采用沙箱机制；

image.png

通信问题；

image.png

推荐的解决方案

乾坤

看乾坤官方吧 官方demo很好懂 qiankun.umijs.org/zh/guide

有文章说啊 这种single spa的不足：不如emp

image.png

EMP去中心模式之模块联邦

首先看看webpack5的优化点（考点）
  1. 持久化缓存 在webpack4中，我们会使用 cache-loader 缓存一些性能开销较大的 loader ，或者是使用 hard-source-webpack-plugin 为模块提供一些中间缓存。在 Webpack5 之后，默认就为我们集成了一种自带的缓存能力（对 module 和 chunks 进行缓存）。通过如下配置，即可在二次构建时提速。
cache: {
    type: 'filesystem',
    // 默认缓存到 node_modules/.cache/webpack 中
    // 也可以自定义缓存目录，cache.cacheDirectory 选项仅当 cache.type 被设置成 filesystem 才可用。
    // cacheDirectory:path.resolve(__dirname,'node_modules/.cac/webpack'),
    buildDependencies : { 
    // 2. 将您的配置添加为 buildDependency 以使配置更改时缓存失效
    config : [ __filename ] 
  
    // 3. 如果您有其他构建所依赖的东西你可以在这里添加它们
    // 请注意，webpack、加载器和从你的配置中引用的所有模块都会自动添加
  } 
}

  1. 更好的tree-shaking （optimization.innerGraph）分析模块导入导出的关系，在生产模式下默认启动； commonjs的追踪

  2. 模块联邦

模块联邦的基本概念和原理的看这个: blog.csdn.net/sendudu/art…

github.com/efoxTeam/em…

解决的问题：

  1. 热插拔；以前靠npm发包，现在直接引用代码；
  2. 公共依赖问题；shared；

image.png 这里显示了模块联邦的两个方面：暴露模块（exposed modules）和共享模块（shared modules）。

容器以异步方式暴露模块。需要先让容器加载/下载你要使用的模块，然后再从容器中使用它们。异步的暴露允许build将每个暴露的模块及其依赖放在单独的文件中。这样，只需要加载使用过的模块，但是容器仍然可以bundle modules。另外，通常，这里使用webpack的分块技术，这使我们可以保持较低的请求和总下载量，从而获得良好的Web性能。

容器的使用者（host）需要能够处理异步加载的暴露模块（remote modules）。

另一个方面，共享模块。容器和应用程序们都可以将共享模块与版本信息一起放入share scope共享范围。他们还能够使用共享范围中的共享模块以及版本要求检查。共享范围将对共享模块进行重复数据删除，该方式可为各方提供版本要求内的共享模块的最高可用版本。

那么有了模块联邦，emp又是嘛呢：我觉得就是利用模块联邦做的微前端架构啦，看这个文章； juejin.cn/post/689494…

这里并补充一个图：之前组里用的npm形式是不是就是这样啦

image.png

但是变成emp的话：

image.png

（WIP补一点）esbuild

这个后边看看吧 起因是因为有个朋友跟我说esbuild打包性能极度好 但是和微前端也没啥关系噢 替代webpack webpack中有esbuild插件

image.png

看看这个~ vite又是嘛呀 juejin.cn/post/696733…

参考引用:
[1]juejin.cn/post/698398…
[2]blog.csdn.net/sendudu/art…
[3]juejin.cn/post/691149…

avatar
文章
阅读
粉丝