自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(5)
  • 收藏
  • 关注

原创 webpack import http

可以使用npm-federation这个插件, 这个插件将umd和module-federation的依赖抹平并打通, 可以做到无感知的直接引入各种远程模块使用。但是module-federation一般只能消费同为module-federation暴露的remoteEntry, 并且模块依赖也和umd等模块规范并不互通, 现有的诸多npm包无法直接使用。类似这样的一行引用模块的代码, webpack构建默认会从本地解析和寻找资源, 那么我们如果有一些远程的资源要怎么引入进项目中?

2023-12-11 20:14:06 876

原创 远程模块如何实现开发热更新

本文中热更新是指(模块热替换 - HMR - hot odule replacement) , 会在应用程序运行过程中,替换、添加或删除模块,而无需重新加载整个页面,显著加快开发速度单个应用的热更新一般开箱即用, 而远程模块的热更新需要根据多个项目的开发环境做一些适配处理, 还没有主流的成熟解决方案。

2023-12-11 10:59:07 950

原创 基于npm和module-federation的远程包管理器

web package manager是基于module-federation(mf)和npm实现的远程包管理器, 打通了目前已有的umd规范与mf模块可以更简单无需顾忌的共享远程模块, 可以方便的接入现存的npm包或使用npm私有源及其他源搭建新的远程模块体系。并且内置可自行扩展的调试插件系统, 可以一键切换远程/本地模块、集成热更新等来大大提高开发和调试效率。

2023-09-22 19:47:41 104

原创 公司数百微前端应用和模块, 如何从UMD平滑升级MF, 或者使MF更加通用?

webpack5 module-federation很强大, 使前端的代码(模块)共享达到了一个新等级, 可以像使用本地模块一样使用远程代码在这之前, 必然是使用最为广泛标准的UMD模块规范来做共享, 使用systemjs等加载器需要处理promise逻辑, 仅在使用异步组件时影响较小, 若远程模块是个函数、是个配置项(如JSON数据), 那么使用限制便会比较明显, 并且也没有成熟配套的TS提示等开发环境支持。MF能够接近无感知的使用远程模块, 并在各领域都有解决方案(webpack-4、5、vite/ro

2022-12-04 23:14:10 517 1

原创 webpack4 module federation

webpack4 实现 module-federation

2022-10-24 11:23:33 661

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除