source map 行为优化 #139

nighca · 2021-07-25T04:21:31Z

改动

修复默认配置下（对应 webpack devtool: eval）第三方库自带 source map 导致的 warning
提供配置项 optimization.highQualitySourceMap，可开启高质量 source map，以提供更好的开发调试体验（对应地会影响构建性能）

highQualitySourceMap: true 时
- 提供细粒度的到源代码的映射（对应 webpack devtool: eval-source-map）
- 第三方依赖包自带的 source map 信息（如果有）也会被消费（通过引入 source-map-loader 实现）
升级 webpack 到 ^5.13.0，对应升级 html-webpack-plugin & ts-loader

webpack 5.13.0 开始支持 package.json 字段 exports 中的通配符（新版本 portal-base & fe-core 依赖这个 feature），详见 https://github.com/webpack/webpack/releases/tag/v5.13.0

`highQualitySourceMap` 对构建性能的影响

对比 builder serve 启动时的耗时（分别测试两次）：

portal-platform

highQualitySourceMap: false: 10.70s, 10.64s
highQualitySourceMap: true: 14.54s, 14.17s

portal-pili

highQualitySourceMap: false: 18.02s, 16.00s
highQualitySourceMap: true: 23.06s, 22.17s

开启前后行为

项目中的 React 组件模块

未开启时：

开启后：

第三方库（fe-core）内容

未开启时：

开启后：

nighca · 2021-07-26T02:06:28Z

build-config.md

-    | `true`  | 开启 `polyfill`，使用默认的方式 (`"global"`) 进行 `polyfill` |
-    | `"global"`  | 开启基于 `@babel/preset-env` 的 `polyfill`，polyfill 会被作为独立的包被页面前置引用，会污染全局内置对象，适合普通应用 |
-    | `"runtime"`  | 开启基于 `@babel/plugin-transform-runtime` 的 `polyfill`，生成辅助函数以替换特定方法，不会污染全局命名空间，适用于工具类库 |
+    * `false`: 不开启 `polyfill`


使用 preset-configs/config.schema.json 重新生成（保持两边同步），因为 table 在编辑器中提示效果不太好，换成 list

liaoyu · 2021-07-26T07:03:34Z

src/webpack/index.ts

+
+function processSourceMap(previousConfig: Configuration, highQuality: boolean) {
+  return produce(previousConfig, (config: Configuration) => {
+    config.devtool = highQuality ? 'eval-source-map' : 'eval'


我试了下开启 highQualitySourceMap 的情况下，src 的代码运行错误时会出现下面的情况（初次运行错误时倒是可以定位到源码，文件改动之后报 error 会有这个现象），还不确认是不是 webpack 的 bug，一会我排查下

证书项目吗？

我验证了下，确实有这个问题，感觉上是 devtool: eval-source-map 对 hot-update 支持不完善导致的；走 eval-* 的 source map 行为基本上都会有两次 source map 映射过程，从 bundle 到 generated，再从 generated 到 original，相对复杂一点

我尝试换成 devtool: inline-source-map，这个问题就没有了；不过正如 webpack 文档里说的，inline-source-map 预期会比 eval-source-map 慢：

eval-source-map build: slowest, rebuild: ok

inline-source-map build: slowest, rebuild: slowest

~~虽然我本地测试没感觉出来差异..~~ 我本地测试确实会对 rebuild 速度影响比较大

我再看下，不行就先换成 inline-source-map / source-map

我找了下文档，可能是这个原因 https://stackoverflow.com/a/37477064

使用 cheap-module-source-map 也是正常的，build: slow, rebuild: slow，打包速度试了下感觉还可以

证书项目吗？

是的~

我找了下文档，可能是这个原因 https://stackoverflow.com/a/37477064

嗯我也看到这个了，不过感觉不是同一个原因；回答里提到的 issue webpack/webpack#2478 对应的问题是浏览器对于 source map 文件的缓存，而那个问题在 chrome 应该很早就修复了

暂时没找到解决办法，我在 webpack repo 提了个 issue webpack/webpack#13867

使用 cheap-module-source-map 也是正常的，build: slow, rebuild: slow，打包速度试了下感觉还可以

嗯这个我本地试了下速度确实可以接受；按文档的说法这个只会精确到行，不过我自己没体验出来什么区别，我先改成这个吧；上边那个 issue 有进展再调整

我先改成这个吧

done fbf3527

liaoyu · 2021-07-26T09:16:23Z

src/utils/build-conf.ts

@@ -51,6 +51,8 @@ export interface Optimization {
  transformDeps: boolean | string[]
  /** 是否开启自动 polyfill 功能，以及开启何种形式的 polyfill */
  addPolyfill: AddPolyfill
+  /** 是否提供高质量的 source map */
+  highQualitySourceMap: boolean


nip:
感觉大部分情况是希望看到更详细的 sourcemap，性能的影响只是初始启动时会慢一点，这里不做成配置或者默认是开启的？

嗯我也有点纠结这个，目前默认关闭的考虑主要是：

从我在上边测试的情况来看，会增加大概 30% 的启动时间；这样对于初始启动慢的项目，影响还不小

highQualitySourceMap 对于调试带来的可能不全是好处，我自己的经验是，jsx 或者 TS 支持的一些新语法本身在构建后会对应比较复杂的逻辑，基于源代码的调试可能会导致难以介入这部分逻辑的细节（有时也会体现为一些看上去正常的代码行无法设置断点）

从我在上边测试的情况来看，会增加大概 30% 的启动时间；这样对于初始启动慢的项目，影响还不小

个人的开发习惯是启一个仓库打包之后会用好几个小时，如果是开发一个比较大的项目时可能几天都不关掉，�这样的情况下我感觉影响还好~
上面第 2 点我貌似还没遇到过，没遇到那么复杂的场景，也可能是没留意 :sad

我们可以主动在项目里先开启用着；后边觉得性能 OK，使用上也没啥明显问题了，再默认打开？（那个应该也不算 breaking change

liaoyu · 2021-07-26T09:27:55Z

src/webpack/index.ts

@@ -162,3 +167,23 @@ function getStaticDirCopyPlugin(buildConfig: BuildConfig) {
    logger.warn('Copy staticDir content failed:', e.message)
  }
 }
+
+function processSourceMap(previousConfig: Configuration, highQuality: boolean) {


nip:
我看有一个放工具函数的文件 https://github.com/Front-End-Engineering-Cloud/builder/blob/v2/src/utils/webpack.ts, processSourceMap 函数要挪过去不？预期后面类似的改配置的方法还会有不少

嗯可以的，transform.ts 里也有一些可以挪，我来一起挪下

done daa1fd1

liaoyu

lgtm

* sv * without svg * use file & svgr for svg * typo * samples change * update config * dev deps & script * optimize svg support * drop support for ENV_VARIABLES_FILE * sv * update samples * debug devServer route fallback & module resolution * enable ts-loader allowTsInNodeModules * update details * update README * extract css * optimization.addPolyfill * use asset module instead of loaders * optimize deps * update TODO * beta.1 * throw error in logLifecycle * beta.2 * upload * beta.3 * beta.4 * disable svgo for svg transform * beta.5 * 支持 extractCommon & extractVendor (#2) * extractCommon & extractVendor * default vendors * fix extractVendor * remove build-config.md * fix review * fix extractVendor * tsconfig 配置调整 (#4) * open esModuleInterop * target to es6 * 调整默认的目标浏览器 (#3) * adjust default target browsers * use svgr for qiniu portal * npm audit * filter ts-loader transpileOnly warning * beta.7 * 新增 analyze 命令以分析 bundle 依赖 (#132) * add analyz * add analyze command * fix self review * fix review * 修复 CI (#134) * debug build-sample.sh * debug samples for CI * update browserslist db * update circle ci node versions * serve 时监测配置文件变更 (#133) * watch build config file change * typo * watch for tsconfig.json * remove useless code * comment * typo * 修复样式修改 hot reload 不生效的问题 (#135) * fix css hot reload * optimize env logic * beta.8 * Upgrade typescript 4.1.x (#137) * use typescript 4.1.x * beta.9 * log pretty (#138) * beta.10 * source map 行为优化 (#139) * process source map * beta.11 * upgrade ts-loader * typo * use cheap-module-source-map instead of eval-source-map * move webpack-related fns to utils/webpack * build-config 支持 npm package 作为 `extends` 目标 (#140) * support npm package as extends target * update build-config doc * support file in npm package * beta.12 * 支持 `optimization.compressImage` (#142) * remove sourcemap from TODO * update build script * specify webpack config target * update comment for getServeConfig * add repository info in package.json * update command prepare & test * optimization.compressImage * update samples * beta.13 * fix dynamic-import (#143) * beta.14 * fix Typescript moduleResolution (#144) * beta.15 Co-authored-by: liaoyu <[email protected]>

nighca added 4 commits July 25, 2021 12:08

process source map

1daddeb

beta.11

027a044

upgrade ts-loader

86a3d41

typo

6ca8272

nighca commented Jul 26, 2021

View reviewed changes

liaoyu reviewed Jul 26, 2021

View reviewed changes

nighca added 2 commits July 26, 2021 18:29

use cheap-module-source-map instead of eval-source-map

fbf3527

move webpack-related fns to utils/webpack

daa1fd1

liaoyu approved these changes Jul 26, 2021

View reviewed changes

nighca merged commit 7364d22 into qiniu:v2 Jul 27, 2021

nighca mentioned this pull request Aug 27, 2021

builder v2 #131

Merged

source map 行为优化 #139

source map 行为优化 #139

Uh oh!

Conversation

nighca commented Jul 25, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

改动

highQualitySourceMap 对构建性能的影响

portal-platform

portal-pili

相关链接

开启前后行为

项目中的 React 组件模块

第三方库（fe-core）内容

Uh oh!

Choose a reason for hiding this comment

Uh oh!

liaoyu Jul 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nighca Jul 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

liaoyu Jul 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

nighca Jul 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

liaoyu Jul 26, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

liaoyu left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

nighca commented Jul 25, 2021 •

edited

Loading

`highQualitySourceMap` 对构建性能的影响

liaoyu Jul 26, 2021 •

edited

Loading

nighca Jul 26, 2021 •

edited

Loading

liaoyu Jul 26, 2021 •

edited

Loading

nighca Jul 26, 2021 •

edited

Loading

liaoyu Jul 26, 2021 •

edited

Loading