记录：webpack5清空了微前端qiankun(Pedestalmode)微前端模式的配置文件，拆分其实比较简单，不过这次顺便在拆分之前对webpack5进行了升级，升级也是比较简单。在这里，实现过程是在没有个人操作的情况下进行的。问题来了。在子应用升级webpack5后，通过base在本地加载调试时，突然启动失败。复发问题正在接近工作。这件事需要解决。首先，当网络面板通过base加载子应用时，会出现一个js文件。404奇怪，因为子应用可以独立启动，而子应用在base加载的时候只有一个js文件404，而且是异步加载的js，所以可以判断一定有应该是子应用Debugging中的加载逻辑有问题，打开public-path文件：if(window.__POWERED_BY_QIANKUN__){__webpack_public_path__=window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;}我发现这些代码通过micro加载时没有运行-前端基础模式！！！整个代码没有执行。这个js文件是通过入口index.tsx文件的顶部导入的。问题已经定位，不用怕。核心问题是：当时发现子应用的变量__webpack_publicPath__没有被修改，所以请求的host不对，异步加载的js文件是404。在排查这个问题之前，我群里说有问题大家一起看看，这样才能学到东西。还好我说了这句话，还请了几个同事一起听。有同事说，会不会是webpack5的treesharking？我是这么认为的，然后让他们看看他们是如何配置这个的，所以同事建议在package.json文件中的sideEffects字段中添加这个，然后重新启动项目，这个问题就解决了，public-path加载正常看似简单的解决方案看似简单的解决方案，需要先定位问题，这会用到以下几点：熟悉微前端qiankun的原理webpack的原理和webpack的动态懒加载实现原理熟悉webpack的__webpack_pulicPath__属性的含义知道treesharking理解webpack5的treesharking配置原理逐条讲解微前端原理。可以看我之前手写的微前端文章+源码：https://github.com/JinJieTan/...微前端的核心原理是：baseproject通过配置信息发送fetchrequest，获取子应用程序的所有资源并将它们渲染到dom节点中并将它们插入到容器节点中。然后劫持路由变化事件，先在base上触发，再分发给其他子应用。webpack异步代码拆分的原理是会打包到不同的js文件中，因为异步加载的js文件其实是通过网络请求获取的。插入到页面中，这个异步请求的前缀其实可以通过变量__webpack__pulicPath__来设置。这也是webpack5联邦模块最早的实现思路。可以动态加载远程js文件，只要控制前缀变量__webpack_pulicPath__即可。微前端+异步代码拆分，核心思想是：动态设置__webpack__publicPath__webpack5的treeshaking配置treeshaking是一个术语，通常用来描述去除JavaScript上下文中的未引用代码（dead-code）。它依赖于ES2015模块语法的静态结构特性，例如import和export。这个术语和概念实际上是由ES2015模块打包器汇总流行起来的。webpack2正式版内置了对ES2015模块（也称为和谐模块）的支持和未使用模块检测功能。新的正式版webpack4扩展了这个检测能力，使用package.json的“sideEffects”属性作为标记，给编译器提供提示，指出项目中哪些文件是“纯（pureES2015modules）”，所以它可以安全地删除文件中未使用的部分。以上是官网文档，介绍了sideEffects和usedExports（更多认为是treeshaking）两种不同的优化方式。sideEffects更有效，因为它允许跳过整个模块/文件和文件的整个子树。usedExports依赖于terser来检测语句中的副作用。这是一个JavaScript任务，不像sideEffects那样简单。而且它不能跳转到子树/依赖项，因为细则说需要评估副作用。虽然导出函数照常工作，但React框架的高阶函数（HOC）在这种情况下会出现问题现在回到我们刚才树鲨化的代码：上下文中实际上没有引用此代码。只有编译代码后，加载__webpack_public_path__变量时才能使用异步代码js文件，所以代码清空。所以为了解决这个问题，我们需要在package.json中添加“sideEffects”属性。它类似于/#__PURE__/但在模块级别而不是代码语句级别运行。它说（指“sideEffects”属性）：“如果标记为无副作用的模块没有直接导出使用，打包工具将跳过对该模块的副作用分析的评估。”。跳过public-path文件进行side-effect分析评估，直接打包，解决了这个问题webpack的tree-sharking文档：https://webpack.docschina.org...最后的一个小问题好像是solved很简单，但是需要熟悉各种日常实现原理，才能快速定位和解决问题。这就是学习源码和各种原理的意义所在。有兴趣的朋友可以去我的gitHub，这些源码+文章都在https://github.com/JinJieTan/Peter-记得给喜欢star的朋友帮Peter看/点赞~
