网站开发公司售后服务,aso网站,搜索引擎优化的意思,如何推广小程序一、前言微前端(micro-frontends)是近几年在前端领域出现的一个新概念#xff0c;主要内容是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块#xff0c;而在用户看来仍然是内聚的单个产品。微前端的理念源于微服务#xff0c;是将庞大的整体拆成可控的小… 一、前言微前端(micro-frontends)是近几年在前端领域出现的一个新概念主要内容是将前端应用分解成一些更小、更简单的能够独立开发、测试、部署的小块而在用户看来仍然是内聚的单个产品。微前端的理念源于微服务是将庞大的整体拆成可控的小块并明确它们之间的依赖关系而它的价值在于能将低耦合的代码与组件进行组合基座基础协议模式能接入大量应用进行统一的管理和输出许多公司与团队也都在不断尝试和优化相关解决技术与设计方案为这一概念的落地和推广添砖加瓦。结合自身遇到的问题适时引用微前端架构能起到明显的提效赋能作用。二、背景目前我司拥有大量的内部系统这些系统采用相同的技术栈在实际开发和使用过程中逐渐暴露出如下几个问题1.有大量可复用的部分虽然有组件库但是依赖版本难统一2.静态资源体积过大影响页面加载和渲染速度3.应用切换目前是通过链接跳转的方式实现会有白屏和等待时长的问题对用户体验不够友好针对上述几个问题决定采用微前端架构对内部系统进行统一的管理本文也是围绕微前端落地的技术预研方案。三、方案调研目前业界有多种解决方案有各自的优缺点具体如下路由转发路由转发严格意义上不属于微前端多个子模块之间共享一个导航即可 简单易实现 体验不好切换应用整个页面刷新嵌套 iframe每个子应用一个 iframe 嵌套 应用之间自带沙箱隔离 重复加载脚本和样式构建时组合独立仓储独立开发构建时整体打包合并应用 方便依赖管理抽取公共模块 无法独立部署技术栈依赖版本必须统一运行时组合每个子应用独立构建运行时由主应用负责应用管理加载启动卸载通信机制 良好的体验真正的独立开发独立部署 复杂需要设计加载通信机制无法做到彻底隔离需要解决依赖冲突样式冲突问题开源微前端框架也有多种例如阿里出品的qiankunicestark还有针对angular提出的mooa等都能快速接入项目但结合公司内部系统的特点直接采用会有有些限制例如要实现定制界面无刷新加载应用且不能对现有项目的开发和部署造成影响因此决定自研相关技术。四、架构设计4.1 应用层应用层包括所有接入微服务工作台的内部系统他们各自开发与部署接入前后没有多大影响只是需要针对微服务层单独输出打包一份静态资源4.2 微服务层微服务层作为核心模块拥有资源加载、路由管理、状态管理和用户认证管理几大功能具体内容将在后面详细阐述架构整体工作流程如下4.3 基础支撑层基础支撑层作为基座提供微服务运行的环境和容器同时接入其他后端服务丰富实用场景和业务功能五、技术重难点要实现自定义微前端架构难点在于需要管理和整合多个应用确保应用之间独立运行彼此不受影响需要解决如下几个问题5.1 资源管理5.1.1资源加载每个应用有一个应用资源管理和注册的文件(app.regiser.js)其中包含路由信息应用配置信息(configs.js)和静态资源清单当首次切换到某应用时首先加载app.register.js文件完成路由和应用信息的注册然后根据当前浏览器路由地址加载对应的静态文件完成页面渲染从而将各应用的静态资源串联起来其中注册入口文件通过webpack插件来实现具体实现如下FuluAppRegisterPlugin.prototype.apply function(compiler) {appId extraAppId();var entry compiler.options.entry;if (isArray(entry)) {for (var i 0; i entry.length; i) {if (isIndexFile(entry[i])) { // 入口文件indexFileEdit(entry[i]);entry[i] entry[i].replace(indexEntryRegx, indeEntryTemp); // 替换入口文件i entry.length;}}} else {if (isIndexFile(entry)) { // 入口文件indexFileEdit(entry); // 重新生成和编辑入口文件compiler.options.entry compiler.options.entry.replace(indexEntryRegx, indeEntryTemp); // 替换入口文件}}compiler.hooks.done.tap(fulu-app-register-done, function(compilation) {fs.unlinkSync(tempFilePath); // 删除临时文件return compilation;});compiler.hooks.emit.tap(fulu-app-register, function(compilation) {var contentStr window.register( appId , {\nrouter: [ \n extraRouters() \n],\nentry: {\n; // 全局注册方法var entryCssArr [];var entryJsArr [];for (var filename in compilation.assets) {if (filename.match(mainCssRegx)) { // 提取css文件entryCssArr.push(\ filename \);} else if (filename.match(mainJsRegx) || filename.match(manifestJsRegx) || filename.match(vendorsJsRegx)) { // 提取js文件entryJsArr.push(\ filename \);}}contentStr (css: [ entryCssArr.join(, ) ],\n); // css资源清单contentStr (js: [ entryJsArr.join(, ) ],\n }\n});\n); // js资源清单compilation.assets[resources/js/ appId -app-register.js] { // 生成appid-app-register.js入口文件source: function() {return contentStr;},size: function() {return contentStr.length;}};return compilation;});};5.1.2资源文件名微服务输出打包模式下静态资源统一打包形式以项目id开头形如10000092-main.js文件名称的修改通过webpack的插件实现核心实现代码如下FuluAppRegisterPlugin.prototype.apply function(compiler) {......compiler.options.output.filename addIdToFileName(compiler.options.output.filename, appId);compiler.options.output.chunkFilename addIdToFileName(compiler.options.output.chunkFilename, appId);compiler.options.plugins.forEach((c) {if (c.options) {if (c.options.filename) {c.options.filename addIdToFileName(c.options.filename, appId);}if (c.options.chunkFilename) {c.options.chunkFilename addIdToFileName(c.options.chunkFilename, appId);}}});......};5.2 路由管理路由分为应用级和菜单级两大类应用类以应用id为前缀将各应用区分开避免路由地址重名的情况菜单级的路由由各应用的路由系统自行管理结构如下5.3 状态分隔前端项目通过状态管理库来进行数据的管理为了保证各应用彼此间独立因此需要修改状态库的映射关系这一部分需要借助于webpack插件来进行统一的代码层面调整包括model和view两部分代码model定义了状态对象view借助工具完成状态对象的映射调整规则为【应用id旧状态对象名称】下面来讲解一下插件的实现插件的实现原理是借助AST的搜索语法匹配源代码中的状态编写和绑定的相关代码然后加上应用编号前缀变成符合预期的AST最后输出成目标代码module.exports function(source) {var options loaderUtils.getOptions(this);stuff app options.appId;isView !!~source.indexOf(React.createElement); // 是否是视图层allFunc [];var connectFn function connect(state) {return Object.keys(state).reduce(function (obj, k) { var nk k.startsWith(stuff) ? k.replace(stuff, ) : k; obj[nk] state[k]; return obj;}, {});};connctFnAst parser.parse(connectFn);const ast parser.parse(source, { sourceType: module, plugins: [dynamicImport] });traverse(ast, {CallExpression: function(path) {if (path.node.callee path.node.callee.name connect) { // export default connext(...)if (isArray(path.node.arguments)) {var argNode path.node.arguments[0];if (argNode.type FunctionExpression) { // connect(() {...})traverseMatchFunc(argNode);} else if (argNode.type Identifier argNode.name ! mapStateToProps) { // connect(zk)var temp_node allFunc.find((fnNode) {return fnNode.id.name argNode.name;});if (temp_node) {traverseMatchFunc(temp_node);}}}} else if (path.node.callee path.node.callee.type SequenceExpression) {if (isArray(path.node.callee.expressions)) {for (var i 0; i path.node.callee.expressions.length; i) {if (path.node.callee.expressions[i].type MemberExpression path.node.callee.expressions[i].object.name _dva path.node.callee.expressions[i].property.name connect) {traverseMatchFunc(path.node.arguments[0]);i path.node.callee.expressions.length;}}}}},FunctionDeclaration: function(path) {if (path.node.id.name mapStateToProps path.node.body.type BlockStatement) {traverseMatchFunc(path.node);}allFunc.push(path.node);},ObjectExpression: function(path) {if (isView) {return;}if (isArray(path.node.properties)) {var temp path.node.properties;for (var i 0; i temp.length; i) {if (temp[i].type ObjectProperty temp[i].key.name namespace) {temp[i].value.value stuff temp[i].value.value;i temp.length;}}}}});return core.transformFromAstSync(ast).code;};5.4 框架容器渲染完成以上步骤的改造就可以实现容器中的页面渲染这一部分涉及到组件库框架层面的调整大流程如下图六、构建流程6.1 使用插件构建过程中涉及到两款自开发的插件分别是fulu-app-register-plugin和fulu-app-loader6.1.1 安装npm i fulu-app-register-plugin fulu-app-loader -D;6.1.2 配置webpack配置修改:const FuluAppRegisterPlugin require(fulu-app-register-plugin);module: {rules: [{test: /\.jsx?$/,loader: fulu-app-loader,}]}plugins: [new FuluAppRegisterPlugin(),......]6.2.编译编译过程与目前项目保持一致相比以前多输出了一份微前端项目编译代码流程如下七、遗留问题7.1 js环境隔离由于各应用都加载到同一个运行环境因此如果修改了公共的部分则会对其他系统产生不可预知的影响目前没有比较好的办法来解决后续将持续关注这方面的内容逐渐优化达到风险可制的效果。7.2.获取token目前应用切换使用重定向来完成token获取要实现如上所述的微前端效果需要放弃这种方式改用接口调用异步获取或者其他解决方案。
