Qiankun

qiankun 官网:https://qiankun.umijs.org/zh/ vue 微利用官网文档:https://qiankun.umijs.org/zh/guide/tutorial#vue-%E5%BE%AE%E5%... 先看官网文档介绍的步骤：1，增加并引入 public-path.js官网代码如下： if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}qiankun 框架在加载微利用时，会给微利用注入一些全局变量，其中蕴含了 POWERED_BY_QIANKUN 和 INJECTED_PUBLIC_PATH_BY_QIANKUN 这两个变量。 POWERED_BY_QIANKUN 是一个布尔值，用于判断以后利用是否是在 qiankun 框架下运行。INJECTED_PUBLIC_PATH_BY_QIANKUN 是在运行时注入的以后微利用的动态资源门路。 通过判断 POWERED_BY_QIANKUN 变量的值，能够确定以后利用是否在 qiankun 框架下运行。如果是，则将 INJECTED_PUBLIC_PATH_BY_QIANKUN 的值赋给 __webpack_public_path__，这样在动静加载资源时，Webpack 就会应用正确的门路来加载模块。 这种动静设置 publicPath 的形式能够确保在微利用中动静加载的资源门路都是正确的，使得微利用可能失常运行在 qiankun 框架的环境中。 2，入口文件 main.js 批改，为了防止根 id #app 与其余的 DOM 抵触，须要限度查找范畴集体对这句话的了解是一个零碎内会接入多个微利用，也就可能会有多个 #app 所以代码里就有了 container ? container.querySelector('#app') : '#app'因为 container 是从基座(主利用)传过来的，具体原理不做剖析，照着官网写就好了。官网代码片段如下： import './public-path';import Vue from 'vue';import VueRouter from 'vue-router';import App from './App.vue';import routes from './router';import store from './store';Vue.config.productionTip = false;let router = null;let instance = null;function render(props = {}) { const { container } = props; router = new VueRouter({ base: window.__POWERED_BY_QIANKUN__ ? '/app-vue/' : '/', mode: 'history', routes, }); instance = new Vue({ router, store, render: (h) => h(App), }).$mount(container ? container.querySelector('#app') : '#app');}// 独立运行时if (!window.__POWERED_BY_QIANKUN__) { render();}export async function bootstrap() { console.log('[vue] vue app bootstraped');}export async function mount(props) { console.log('[vue] props from main framework', props); render(props);}export async function unmount() { instance.$destroy(); instance.$el.innerHTML = ''; instance = null; router = null;}其中 bootstrap，mount，unmount 就是生命周期钩子，在官网文档中介绍生命周期钩子应用react做的实例，在这里：https://qiankun.umijs.org/zh/guide/getting-started#1-%E5%AF%B... ...

7月6日，火山引擎数智平台（VeDI）《全链路增长：数据飞轮转动生产新生力》主题流动在北京举办，会上分享了行业、企业、产品视角下的数据飞轮实际，并针对生产行业提出业务利用“四更”新主张：“更懂业务”、“更会决策”、“更准触达”和“更快口头”。 数据飞轮，是火山引擎基于字节跳动10年数据驱动理念积淀而来的教训模式，往年4月一经推出便备受企业关注。它强调“以数据生产促数据生产，以数据生产助业务倒退”，通过“数据生产”这一出发点，转动企业业务应用层和数据资产层的两个飞轮。 图：“数据飞轮”模式示意图 聚焦到生产行业，数据飞轮面向业务应用层主张“更懂业务”、“更会决策”、“更准触达”和“更快口头”，火山引擎大生产行业数据产品解决方案负责人田岚介绍： “更懂业务”，指反对企业构建全局视角多主体画像平台。过来企业强依赖单渠道CDP产品，难以贴合业务需要构建欠缺的市场画像，数据飞轮可能帮忙企业将CDP系统升级为“X”DP，在整合多渠道市场数据的根底上，反对多主体画像构建，更懂业务，更能满足业务需要。 “更会决策”，则指在企业业务的理论运行中，通过更快、更好、更全面的数据，可能帮忙企业在商机转化、潜在市场预测、新品爆品孵化、用户体验降级等多个场景上做出更优更迷信的决策。 除此之外，借助包含客户数据平台VeCDP、A/B测试DataTester、增长剖析DataFinder、增长营销平台GMP等系列数据产品，企业还能实现内容层面的更“准”触达，帮忙营销场景下的线下门店、线上店铺以及直播间，高效引流、促成成交；而借助包含数据洞察DataWind等产品与飞书等IM工具的充沛联动，业务数据可在受权条件下，随时随地在企业组织范畴内实现及时共享，帮忙企业突破跨部门、跨团队的数据传输壁垒，助力业务更“快”口头。 流动上，华润雪花啤酒私域经营总监赵蕊分享了雪花啤酒在数字化营销畛域的实践经验。从啤酒旧世界到新世界，雪花啤酒重塑了与消费者之间的链接模式。在数字化营销的链路中，雪花啤酒以扫码营销切入，深度链接消费者；进而借助精细化的经营，以人为本，打造极致的品牌生态圈；最终基于雪花一方消费者数据平台，以数为基，实现营销数智化。在与火山引擎的单干中，雪花啤酒基于一方CDP能力，联合火山引擎VeCDP中的公域洞察模块，进一步欠缺了用户洞察，实现基于市场特色的精准营销。“在适合的工夫将适合的营销推送给适合的人群”，从而实现目标用户的全新体验降级，真正打造出以数据洞察为根底的’啤酒新世界。” 除了VeCDP，火山引擎数智平台旗下的多款数据产品，都能使数据生产笼罩至企业业务利用的各个环节，其中就包含A/B测试DataTester。DataTester源于字节跳动外部超240万次实际打磨，可能帮忙企业低门槛实现多种业务场景下的A/B测试试验。近期，DataTester公布全新性能“MAB智能调优试验”、降级“智能公布平台Feature Flag”，同时还推出“可视化数据集成”及“集成工作台”计划。 其中，新性能“MAB智能调优试验”颇受现场企业关注，据DataTester产品负责人介绍，该项新性能不仅反对多端、多场景的A/B试验开设，还能实时计算各实验组胜出概率，按成果动态分配流量，帮忙企业以0剖析老本、0工夫老本的模式获取A/B试验指标收益的最大化，从而助推实现科学决策、实现业务增长。 面向企业的数据资产层，数据飞轮遵循“可治理”、“可落地”、“可经营”的建设治理准则。通过提供数据BP咨询服务，并搭建企业级数据研发和治理平台、数据资产治理经营平台，使数据飞轮可能贯通企业数据集成、开发、服务、生产全链路，并继续输入应答各环节潜在卡点的数据根底建设和问题应答能力，实现构建可驱动业务倒退的企业数据“供应链”体系。 以大数据研发治理套件DataLeap为例，它能帮忙企业疾速实现数据集成、开发、运维、治理、资产、平安等全套数据中台建设，晋升数据研发效率、升高治理老本；在此基础上，它还能凭借更细粒度的行、列权限管制，表及字段级别的血统治理等，最大限度保障企业数据安全。 以后，国内生产行业的数字化转型曾经进入新阶段，从中国连锁经营协会与麦肯锡独特公布的《2022年中国批发数字化白皮书》能够窥见：中国零售业数字化转型过程曾经从信息化到线上化、智能化再到平台化生态化；目前，有65%的企业处于2.0线上化时代，10%的企业处于3.0智能化时代。而数据飞轮，正在成为推动企业数字化过程的无效模式。

前端微服务微服务打包 一些资源（打包后的）找不到的问题 次要是因为 在乾坤状态下 此处的配置会把动态资源地址给替换为在线地址，而乾坤拿到的是根级别域名 所以 会把后续的二级地址给去掉 所在此处须要加上二级的门路（如果打包的时候加上了二级门路的话，如果没有加则不须要批改） 首先想到的是打包的时候，vue.config.js中publicPath加上二级门路 const publicPath = process.env.NODE_ENV === 'production' ? './monitorCloudWeb/' : '/'雀氏，在乾坤主利用能够关上，失常拜访，然而独自作为一个页面关上就会发现会有俩层门路。 所以这只能解决局部问题。 重点来了因为要搞微前端，所以就会有public-path.js这个文件间接在外面加判断是否须要减少二级门路 if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = process.env.NODE_ENV === 'production' ? window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__ + '/monitorCloudWeb/' : window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__}在vue.config.js文件中就不须要批改publicPath，还原即可 const publicPath = process.env.NODE_ENV === 'production' ? './' : '/'

Douglas Crockford: "The best thing we can do today to JavaScript is to retire it."道格拉斯：咱们明天能对 JavaScript 做的最好的事就是将它服役。 我nm，你谁呀，我大 JS 是你说服役就服役的？！ 查一下 Douglas Crockford 这老哥是谁？ 道格拉斯·克罗克福特（英语：Douglas Crockford）是美国程式设计师和企业家，出名于对网页程式语言JavaScript推动和改进；且为轻量级材料替换格局「JSON」的建设者。 他还是泛滥JavaScript语言开发工具的创造者，例如JSLint和JSMin。近段时间，他在PayPal负责JavaScript语言进阶参谋，当然 他也是JavaScript、JSON以及web技术的布道者，在这些方面出版发行了很多出名的书籍及演讲。 —— wikipedia WC，牛蛙牛蛙，JSON 之父，JavaScript 推动、改进、布道者，1975 年就在大学学习 Fortran 编程语言了，妥妥的 OOOOOOGGGGGG大佬。 那之前始终重仓 JavaScript，为何当初一反常态，唱衰 JavaScript 呢？看看他具体怎么说的？ Evrone: In your opinion, what expected changes in JavaScript are going to be the most important?Douglas: The best thing we can do today to JavaScript is to retire it. Twenty years ago, I was one of the few advocates for JavaScript. Its cobbling together of nested functions and dynamic objects was brilliant. I spent a decade trying to correct its flaws. I had a minor success with ES5. But since then, there has been strong interest in further bloating the language instead of making it better. So JavaScript, like the other dinosaur languages, has become a barrier to progress. We should be focused on the next language, which should look more like E than like JavaScript. ...

微前端系列之：一、记一次微前端技术选型二、清晰简略易懂的qiankun主流程剖析三、记一次qiankun落地遇到的问题 本文是系列之三。 我的项目背景app下架须要把所有页面都迁徙到企业微信h5，作为主利用。原本内嵌到app webview的h5，以微利用的形式接入到主利用。主利用技术选型：vite + vue3 + qiankun子利用，有vue、react__webpack_public_path__相干微利用market-app-h5背景常识，publicPath配置如下：本地开发 /marketapp测试 /marketapp预生产 /生产：https://some.cdn.com/marketapp 微利用接入时，须要写这段代码，这是官网提供的demo代码。 if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}只管能够胜利加载入口html，以及写在html文档的近程script和近程style。但会遇到以下问题： 分包无奈加载，排查之后，发现是publicPath失落了。在尝试批改配置时，搞不清楚主利用注册子利用入口、webpack配置的output.publicPath、__webpack_public_path__、window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__、router.base的关系。通过查资料梳理出了以下关系： 主利用注册微信利用入口，是入口html的地址。在这个微利用中入口如下： 本地开发：http://local.some.domain:3000...测试：http://test.some.domain/marke...预生产：https://preprod.some.domain生产：https://prod.some.domainwebpack.output.publicPath，决定了输入动态资源申请url前缀，如代码写了'/static/1.js'，配置了output.publicPath = '/marketapp/'，那么打包进去的后果是 '/marketapp/static/1.js'__webpack_public_path__是运行时的webpack.output.publicPath，能够动静批改其值，会笼罩webpack.output.publicPath的值window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__，是 qiankun 提供的。依据源码剖析，它会拿到微利用html入口url之后，将pathname的最初一项去掉，再组装起来。譬如，子利用入口配置：http://local.soame.domain/mar...，那么通过解决后，会变成http://local.soame.domain/。所以在加载分包的时候，失落了前缀，而后导致404。所以，针对这种问题，还要辨别publicPath是否cdn地址，所以最初代码改成这样，就能够了 let STATIC_URL = '';switch (process.env.NODE_ENV) {case 'development': STATIC_URL = '/marketapp/'; break;case 'test': STATIC_URL = '/marketapp/'; break;case 'preprod': STATIC_URL = '/'; break;case 'production': STATIC_URL = '//some.cdn.com/marketapp/'; break;}if (window.__POWERED_BY_QIANKUN__) { // 如果以后环境下webpack配置的out.publicPath的值是cdn地址，那么间接应用 if (/(https?:)?\/\/.*$/.test(STATIC_URL)) {        __webpack_public_path__ = STATIC_URL;    } else { // 如果以后环境下webpack配置的out.publicPath的值不是cdn地址，如 / /marketapp /a/b/c // 须要对window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__进行重新处理        __webpack_public_path__ = new URL(window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__).origin + STATIC_URL;    }}款式隔离相干主利用的UI库是vant3.x微利用marketapp的UI库是vant2.x微利用priceluck的UI库是antd-mobile ...

微前端系列之：一、记一次微前端技术选型二、清晰简略易懂的qiankun主流程剖析三、记一次落地qiankun 本文是系列之二。 综述qiankun 是在 single-spa 根底上进行二次开发的。本文外围剖析利用加载、利用切换、利用隔离 这三个外围性能原理。 一开始打算是间接从源码角度上介绍流程和原理的，但会导致篇幅过长，且重点抓不住。 所以打算把一些主流程间接用流程图和文字说明，一些外围实现，能够再联合原来来解读。 残缺流程图：https://github.com/Rockergmai... 主流程 路由劫持路由劫持性能，是在 single-spa 实现的。 对 hashchange / popstate 全局事件做监听，触发 reroute 办法。 对 window.addEventListener window.removeEventListener window.history.pushState window.history.replaceState做劫持。 外围性能是 reroute，下文会重点介绍，这个办法被好几个办法都调用了。 注册微利用用户调用 qiankun 提供的 registerMicroApps 注册子利用。它其实是调用了 single-spa 的 registerApplication 来进行注册的，其中的 appOrLoadApp 这个选项用来传入加载微利用那个的逻辑。当路由匹配 activeWhen 时，会用来加载微利用。 qiankun 帮咱们实现了加载微利用的逻辑，是通过 loadApp 办法来加载的，其外围是应用到了 import-html-entry 这个库来实现的。 最初还是会调用 reroute 办法。 启动qiankun用户调用 qiankun 的 start 办法，启动 qiankun。 启用预加载微利用策略，依据不同的策略，加载微利用。外围实现就是用 requestIdelCallback 在 cpu 闲暇时预加载微利用的入口文件、以及近程 scripts 和 styles。 最初也会调用 reroute 办法。 ...

qiankun官网文档：https://qiankun.umijs.org/zh/guide/getting-started版本： "qiankun": "^2.4.0","vue": "^2.5.2"vue 入口文件main.js失常的vue入口文件写法 new Vue({ el: '#app', router, store, components: { App }, apolloProvider, template: '<App/>' })退出微前端之后的写法： let instance = null;function render(props = {}) { const { container } = props; instance = new Vue({ router, store, apolloProvider, render: h => h(App), }).$mount(container ? container.querySelector('#app') : '#app');}// webpack打包公共文件门路if (window.__POWERED_BY_QIANKUN__) { __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;} else { // 独立运行时 render();}//export async function bootstrap() { console.log('[vue] vue app bootstraped');}export async function mount(props) { console.log('[vue] props from main framework', props); render(props);//props为微前端渲染的节点}export async function unmount() { // instance.$destroy(); // instance.$el.innerHTML = ''; // instance = null; // router = null;}主利用注册微前端入口 ...