Ray
Ray
在开发过程当中还遇到一个问题: 如果有2个异步加载的页面: ``` javascript require.ensure([], function() { require('modules/A'); }) require.ensure([], function() { require('modules/B'); }) ``` 其中`A,B`模块都共同引用了`模块C`,那么在打包过程中,`webpack`会将`A,C`打包在一起,同时还会在`B,C`打包在一起。 虽然`webpack`提供了`CommonChunkPlugin`插件,但是这个插件是将`entry`里面的共同的模块抽离出来打包。它没法去分析`require.ensure([], funciton() {})` 异步加载模块里面的共同模块,然后去打包。 这样就造成了重复打包的情况。请问遇到这种问题,有什么比较好的方法去解决呢?
@cobish @eyasliu 对应到具体的业务上来看的话,我的理解是将一写工具模块可以单独打一个包,可以放到`entry`里面引入,具体到不同页面的业务逻辑的话,可以通过`require.ensure([], function(){})`这种方式进行按需加载。这种方式是否合理呢?
@webgzh907247189 使用 entry 的配置项的话需要在代码里面手动引入 @babel/polyfill ,这样通过babel 编译后的代码会将所有的 polyfill 都引入到你的编译后的代码里面去。这里也可以参考下`[email protected]`的[文档](https://cli.vuejs.org/zh/guide/browser-compatibility.html#usebuiltins-usage)里面有关 babel 的 useBuiltIns 的说明
@webgzh907247189 额,你是在node环境下去运行代码的。`@babel/polyfill`里面涉及到的东西没必要输入到你的代码里面了。直接作为一个package来使用就好了。 一般在web环境下,代码需要编译,肯定不能在本地直接引入package,那么这个时候就需要把`@babel/polyfill`所提供的`polyfills`打包到最后需要编译输出的代码。 可以见我写的[demo](https://github.com/CommanderXL/study/tree/master/babel)
@tulies 这个得看你具体运用的场景了。比如你是使用`babel`编译一个工程应用项目,用 `@babel/preset-env` + `useBuiltIns: 'entry' + browserlist` 的方式基本上就可以 cover 住你项目的代码所运行的场景了。但是如果你是需要使用 `babel` 去构建一个 `library` 的话,就用 `@babel/plugin-transform-runtime` 这种方式。这块具体的内容可以参加 `babel` 的官方文档上的说明。
文章里面有提到关于node_modules下面的package也需要走编译的流程,这块的内容是如何实践的?通过 webpack plugin 进行 babel-loader 的匹配和加入的工作么?
其他相关文章:[回顾 babel 6和7,来预测下 babel 8](https://juejin.cn/post/6956224866312060942) 这篇文章里面也提到了有关 `@babel/plugin-transform-runtime` 相关的缺陷以及 `@babel/polyfills` 所做的工作(对应到 Some Tips 里面的第二点)。
其他拓展阅读: * [Async with Composition API](https://antfu.me/posts/async-with-composition-api) * [Composable Vue - VueDay 2021](https://antfu.me/posts/composable-vue-vueday-2021#async-to-sync)
[webpack5 `moduleGraph`、`dependencyGraph` 相关](https://mp.weixin.qq.com/s?__biz=Mzg3OTYwMjcxMA==&mid=2247483743&idx=1&sn=0ce0845ee3e5316bcac05993035de3ed&scene=21#wechat_redirect)
@BUPTlhuanyu 我是这样理解的:其实这里 `childCompiler` 就是一个新起的 `compiler`,只不过 `childCompiler` 和所在的原有的 `compiler` 之间是有一定联系的,也就是在 `childCompiler` 初始化阶段所 继承/复用 的相关配置流程信息。`childCompiler` 算是对于一个新的 `compiler` 的一个封装,去解决在构建过程中可能需要进行的其他的编译相关的操作。