阅读 320

微前端和webpack5(供自学)

微前端概述(应用拆分)

微前端(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的追踪

  1. 模块联邦

模块联邦的基本概念和原理的看这个: 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…

文章分类
前端
文章标签