Sentry-javascript: @sentry/浏览器大小

嘿，谢谢你提出这个问题。
虽然我们理解并普遍同意您对包大小的担忧，但我认为首先比较 gzip 包大小而不是未压缩的缩小文件大小是公平的：

@sentry/browser是 21.3799 KB
raven-js 13.44 KB

此外，虽然这可能并不适用于所有人，但我们提供并通常指导人们使用我们的 CDN 加载器，它将在您的网站上为您设置 SDK。

请参阅： https ://docs.sentry.io/quickstart/?platform=browser

该脚本的占用空间和对页面加载时间的影响 <1KB gzipped 同时保持相同的功能。

所以tl;博士：
我们意识到这一点，我们知道还有改进的余地，但这不是目前的首要任务。

我认为首先比较 gzip 包大小而不是未压缩的缩小文件大小是公平的：

我认为比较缩小的大小也是公平的，因为性能问题不仅来自下载 javascript，还来自解析和执行。 ~92kb 相当大，在低端设备上最多可以增加 1 秒的解析时间（仅针对这个库！）。

我不确定您从哪里获取 CDN 脚本的< 1KB数量。 你能详细说明一下吗？ 当我打开https://browser.sentry-cdn.com/4.0.4/bundle.min.js时，我看到压缩后的大小为 22KB。

您应该知道 sentry 的 sdk 只是开发人员包含的众多库之一。

PS：我喜欢哨兵，它对我们非常有帮助。 网络性能只是我热衷的事情。 ;)

@klaemo
呵呵，不用担心😅

就像我说的，我们知道并且我们不希望它变小。
对我们来说最高优先级是发布新的 SDK，我们将随着时间的推移努力改进捆绑包的大小。
我们可以采取更多步骤，例如：使用tslib ，组合字符串......
所以还有很大的改进空间。

对不起，我之前发布的链接已经过时了🙃
我指的是_Loader_： https ://docs.sentry.io/platforms/javascript/loader/
虽然 _Loader_ 也有它的局限性，因为它是异步的，最后，它仍然会获取和注入 SDK（即使它是异步的），它是我们提供的替代方案，因为人们要求它。

@HazAT对不起，伙计们，但你能提供下一个版本的发布日期吗？
我的意思是，#master 分支已经有一些更改，但尚未发布。 那个决定是 4x 版本可用于 Angular5+ 项目。

@rayzru刚刚发布4.0.5 ，但请保留与该主题相关的帖子。

在我看来，这绝对是一种回归，也是不更新到新版本的严重理由。

💯 我正要升级，直到我注意到：

• 之前： https ://bundlephobia.com/[email protected]
• 之后： https ://bundlephobia.com/result?p=@sentry/browser @4.0.1

至少包的大小更小，但我认为 ⚠️ +10 KB的 gzip 压缩 JavaScript 包是很重要的。 我们将等待，继续努力:)

@HazAT是否可以生成 esm 文件。 它将允许 webpack 通过连接和摇树获得更好的结果。

您可能想要添加一些 CI 工具来跟踪每个合并请求的包的包大小。 由于这个问题，它实际上已经增长到 100 kB，请参阅https://bundlephobia.com/result?p=@sentry/browser @4.3.0

尝试例如https://github.com/siddharthkp/bundlesize

Webpack 入口点的默认性能预算为 250 kb，以确保您在任何设备和网络上都能获得良好的性能。 100 kb 的 Sentry 占用了相当多的预算。

如果修复这个回归在路线图上，或者如果图书馆在没有规模预算的情况下继续增长，请让我们保持更新。

我们正在向客户付费，并在后端、本机和 Web 上对 Sentry 进行了大量投资，但是我们无法证明将库大小升级到超过 3 倍（[email protected] 为 31 kB）是合理的。

@jacobrask您可以坚持使用旧版本的库，这就是我们在https://www.onepixel.com/ 上所做的，它运行良好👌。

@jacobrask这绝对在我们的名单上，我们还认为有一些低垂的果实，我们可以轻松地减少我们的捆绑包大小。
越来越多的人提出这个要求，所以我们可能会比预期更快地解决这个问题。

@HazAT
Sentry 浏览器 SDK 汇总包可以进行优化。 在 bundle min js 文件中，重复了很多 tslib 代码。 如__generator、__assign。 在浏览器环境中，最好共享一个代码。 但是浏览器项目使用另一个包 dist 文件。 也许将 gzip 大小从 23K 减少到 16K。

捆绑包大小在 4.3.2 中相同
https://bundlephobia.com/result?p=@sentry/browser @4.3.2 无论从
https://github.com/getsentry/sentry-javascript/pull/1738 :(

@vkrol我们必须恢复@gaterking所做的更改，至少对于 npm 包而言。
另一方面，CDN 上的捆绑包应该更小。

我们肯定会重新添加更改，但我们需要讨论它，因为我们需要一个对tslib的依赖。
此外，打字的生成方式也被破坏了。

@HazaT好的，谢谢。

@vkrol我们必须恢复@gaterking所做的更改，至少对于 npm 包而言。
另一方面，CDN 上的捆绑包应该更小。

我们肯定会重新添加更改，但我们需要讨论它，因为我们需要一个对tslib的依赖。
此外，打字的生成方式也被破坏了。

希望尽快。

@gaterking @kamilogorek已经修复了它https://github.com/getsentry/sentry-javascript/pull/1751
我们只需要做一个“紧急”发布，这就是我们恢复它的原因。

在客户端，我基本上希望它能够捕获错误并将它们提交给 API。

这个图书馆还做了什么这么复杂的事情？

真的很难理解为什么一个更简单的错误报告器需要有这么大的足迹😐

@mindplay-dk 主要是因为 JavaScript 和浏览器一团糟^^
我们需要做很多修复损坏/错误的堆栈跟踪。
“只是捕捉错误”这个简单的任务也比看起来要复杂得多。

真的很难理解为什么一个更简单的错误报告器需要有这么大的足迹😐

@mindplay-dk 因为它并不简单。

这是用于捕获所有浏览器中的错误并将它们统一为可用数据结构的代码： https ://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/tracekit.ts

最近的尺寸缩小做得很好，非常感谢。 👍

快速浏览链接文件显示了处理 Opera 10 错误的代码，这真的还需要吗？ TraceKit 也没有考虑到 Raven 的（当前）2 倍大小增加，这已经很大了。

一些建议：

• 删除 md5
• 减少 async/await 的使用，它对 ES5 的编译效果很差。 将https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378 与输出代码进行比较（在生产包中搜索“processEvent”）。 整个文件在生产包中变得很大。

在其他包（如包/核心）中是否有一些共享代码（rewriteframes.ts 中的app:///${base} ）？ 它们不被客户端使用，但被节点使用。

因为它并不简单。

@kamilogorek yikes，你显然是对的......我意识到 JavaScript 是一团糟——我想我以前从未研究过这个领域，我没有意识到这有多糟糕。 我想在 JS 中处理堆栈跟踪确实没有简单的方法。 只是。 哎呀。 😐

您可以只提供已经提到的 esm 文件，而不是仅仅尝试最小化帮助程序，这很容易，甚至是当今的最佳实践。

减少 async/await 的使用，它对 ES5 的编译效果很差。 将https://github.com/getsentry/sentry-javascript/blob/master/packages/core/src/baseclient.ts#L307 -L378 与输出代码进行比较（在生产包中搜索“processEvent”）。 整个文件在生产包中变得很大。

这是错误的方式，与其为 ES5 进一步优化，不如为使用现代浏览器的80.07%优化更重要。

对于需要支持旧浏览器的每个人：
任何支持<script type="module"> (caniuse: esm , async ) 的浏览器都支持异步函数，因此只有旧浏览器的用户需要等待更长时间（无论如何他们需要更长的时间）

证明：
160KB（es5，捆绑）> 119KB（esm，普通文件）

所以请捆绑 esm 文件（也），就像将 $ /tsconfig.esm.json （扩展tsconfig.build.json ）中的 $ module和target设置更改为esnext一样简单tsconfig.build.json文件的 $#$ tsconfig.esm.json $#$ 文件添加到包中，将其添加到构建和包中并在package.json中指定模块条目

如果你愿意，我可以为此添加一个 PR。

如果你愿意，我可以为此添加一个 PR。

我会喜欢@cromefire :)

如果有一个选项可以在经典模式和现代模式之间进行选择，比如 vue cli，那就太棒了。 现代版本仅支持大多数现代浏览器，因此可能不那么臃肿。

或者如果它可以像 webpack env 一样工作则更好，这样用户就可以指定所需的浏览器支持。 Ofc，这不是一个简单的功能，但只是想把它扔在那里:)

很棒的产品！

有了这个新 PR，你可以配置 babel，但是你只想支持你需要的浏览器

@sentry/browser 的大小是 raven-js 大小的两倍多： 86 kB对 39 kB（缩小）。

仅供参考：最新版本的@sentry/browser的大小增加到91.8 kB 。 资料来源： https ://bundlephobia.com/result?p=@sentry/browser @4.5.0。

@cromefire感谢您优化库大小的工作！

我刚刚尝试使用来自v4.5.0的新@sentry/utils/esm模块无法解析。

事实上，在新的yarn install之后，我没有在 node_modules 中找到文件夹。 （见截图）

 ./node_modules/@sentry/core/esm/baseclient.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/async”

 ./node_modules/@sentry/browser/esm/backend.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/browser/esm/tracekit.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/browser/esm/integrations/helpers.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations/pluggable”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/core/esm/baseclient.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/core/esm/dsn.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/core/esm/integrations/extraerrordata.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/is”

 ./node_modules/@sentry/browser/esm/integrations/globalhandlers.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/core/esm/baseclient.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/core/esm/basebackend.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/core/esm/sdk.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/core/esm/integration.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/core/esm/integrations/dedupe.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/core/esm/integrations/sdkinformation.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/hub/esm/hub.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/hub/esm”中的“@sentry/utils/esm/logger”

 ./node_modules/@sentry/browser/esm/client.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/tracekit.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/integrations/useragent.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/integrations/trycatch.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/integrations/helpers.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations/pluggable”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/integrations/pluggable/vue.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations/pluggable”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/integrations/pluggable/ember.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations/pluggable”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/transports/beacon.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/transports”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/transports/fetch.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/transports”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/core/esm/baseclient.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/core/esm/integrations/dedupe.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/hub/esm/scope.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/hub/esm”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/hub/esm/hub.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/hub/esm”中的“@sentry/utils/esm/misc”

 ./node_modules/@sentry/browser/esm/parsers.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/browser/esm/integrations/trycatch.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/browser/esm/integrations/helpers.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/core/esm/api.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/core/esm/basebackend.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/core/esm/dsn.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/hub/esm/scope.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/hub/esm”中的“@sentry/utils/esm/object”

 ./node_modules/@sentry/core/esm/integrations/pluggable/rewriteframes.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations/pluggable”中的“@sentry/utils/esm/path”

 ./node_modules/@sentry/browser/esm/parsers.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm”中的“@sentry/utils/esm/string”

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/string”

 ./node_modules/@sentry/core/esm/baseclient.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm”中的“@sentry/utils/esm/string”

 ./node_modules/@sentry/core/esm/integrations/inboundfilters.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/core/esm/integrations”中的“@sentry/utils/esm/string”

 ./node_modules/@sentry/browser/esm/backend.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm”中的“@sentry/utils/esm/supports”

 ./node_modules/@sentry/browser/esm/integrations/breadcrumbs.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations”中的“@sentry/utils/esm/supports”

 ./node_modules/@sentry/browser/esm/integrations/pluggable/reportingobserver.js 中的错误

找不到模块：错误：无法解析“./node_modules/@sentry/browser/esm/integrations/pluggable”中的“@sentry/utils/esm/supports”

 ./node_modules/@sentry/browser/esm/transports/fetch.js 中的错误

未找到模块：错误：无法解析“./node_modules/@sentry/browser/esm/transports”中的“@sentry/utils/esm/supports”

@pascaliske esm构建仍处于试验阶段，我们尚未公开记录它。 一旦所有内容都经过测试，我们就会这样做，并将我们的发现发布在这里。

@kamilogorek是的，我知道。 只是想让你知道这些错误。 🙂

谢谢，感谢@pascaliske！ 我们会尽快提供 ESM 支持 :)

@pascaliske 先试试yarn build

@cromefire不，我认为这无济于事。 我刚刚从 npm 下载了包，所以没有可用的构建环境。 🙂

我搜索了一下源代码，并将@sentry/browser与@sentry/utils进行了比较。 我认为这是问题所在： packages/utils/tsconfig.build.json#L5 vs. packages/browser/tsconfig.build.json#L5 。 正常的构建输出是否有可能覆盖 esm 构建输出？ 🤔

在我的 node_modules 文件夹中， browser包包含来自 normal 和 esm 的构建输出。 但是utils包只包含根文件夹中的正常构建输出。

是不是已经发布了？

我搜索了一下源代码并将 @sentry/browser 与 @sentry/utils 进行了比较。 我认为这是问题所在： packages/utils/tsconfig.build.json#L5 vs. packages/browser/tsconfig.build.json#L5 。 正常的构建输出是否有可能覆盖 esm 构建输出？ 🤔

不，你必须看看 esm tsconfig

明天看看

大家好！ 我们还在 Sentry 中探索了一些包大小，并遇到了这个问题： https ://github.com/getsentry/sentry-javascript/blob/master/packages/minimal/package.json#L20

看起来它为很少的功能（传播和分配）增加了一大块大小。 我对 Typescript 不是很熟悉，但是在运行时有必要这样做吗？

我也不清楚为什么@sentry/types需要成为 _runtime_ 依赖项，而不是位于devDependencies ...

@evocateur对于所有打字稿用户来说，这是必要的。 Typescript 将其全部优化。
（但.d.ts文件可能需要它）

@IanMitchell它不用于 esm 构建，而是用于普通构建

4.5.0 的 bundle.js 包含大量重复代码，如 Severity、htmlElementAsString、htmlElementAsString、uuid4、parseUrl 等。 这不是故意的！

当我使用 WebPack + Babel 7 通过import * as Sentry from '@sentry/browser'; （作为文件中的唯一行）执行捆绑时也会发生同样的情况，那么捆绑的大小为 326kb。 参见： sentry.bundle.js.txt
我们也对其他捆绑包使用相同的配置，但 sentry 是唯一存在该问题的捆绑包。

bundle.min.js 里面没有重复的代码，这可能是由于 rollup 摇树造成的。

因此，临时解决方案是使用import '@sentry/browser/build/bundle.min.js';

4.5.0 的 bundle.js 包含大量重复代码，如 Severity、htmlElementAsString、htmlElementAsString、uuid4、parseUrl 等。 这不是故意的！

这就是为什么（或者至少是一个原因）有esm构建的原因。 如果你有一个捆绑器，它比使用预构建包更有效。 （它只是测试版，现在仍然损坏）

再看一遍，我不相信这不能更小。 小多了。

具有源映射支持的堆栈跟踪应该是这个库中迄今为止最复杂的东西 - 它看起来不像？ 似乎大部分足迹来自核心框架，它与 node.js 客户端共享，我确信足迹并不是真正的问题。

不要误会我的意思，这是一个美丽的建筑——非常好的 TypeScript 作品。

但在客户端，这并不意味着什么。 它需要小且加载速度快——尤其是对于像这样低级别的东西，源代码是否漂亮并不重要。 据我所知，令人印象深刻的是架构正在消耗大量字节。

为了比较：

我遇到了TrackJS ，它在大约 10KB 的包中具有类似的功能（带有源映射的跨浏览器堆栈跟踪）。

原始的TraceKit是 ~3KB min+gz。

我发现这个库可以在 ~8KB min+gz 或 ~10KB 中使用 x-browser polyfills 执行源映射位（在客户端）。

除此之外，还需要收集一些浏览器信息，以预期的 JSON 格式包装，然后发布——这不应该超过几 KB min+gz。 应该是？

我觉得这只是比大多数人需要的更多的架构。 如果我需要任何插件支持，也许我需要一个简单的钩子来让我将信息插入 JSON 帖子，但仅此而已。

我知道现在部署数兆字节的 JS 是很常见的，但我们在工作中有严格的内容政策，以确保我们交付的项目可以在移动设备上快速加载，我无法证明将超过一半的 JS 预算用于错误 -日志记录 - 最高可能是 10%，所以大约 15-20 KB 似乎是合理的。

我喜欢你的产品，但我无法部署这个客户端😐

对于这样的事情，将堆栈跟踪和源映射解析委托给服务器可能是一个好主意，其中大小无关紧要

对于这样的事情，将堆栈跟踪和源映射解析委托给服务器可能是一个好主意，其中大小无关紧要

@cromefire有趣的想法。 我想知道这是否就是 TrackJS 所做的以减小尺寸？ （他们的客户端是专有的 - 只有缩小的源可用，所以很难说他们做了什么。假设我可以安装它并查看通过电线传输的内容......）

这是在浏览器中解析源映射的一个更简单的包： source-map-resolve at ~2KB min+gz ...这没有 polyfill，但是（如果可行）我认为我们应该能够达到 ~10KB不需要 polyfill 的现代浏览器。

没有 polyfills

Polyfills 不应该在esm构建中，这样也可以工作，但在 bachend 中它会更少

@cromefire ESM 版本现在应该可以在4.5.1中使用。 仍然没有记录，因为我们想确保它经过实战测试，但到目前为止还不错。 我用 babel loader 检查了常规的 webpack 构建，它就像一个魅力。

除此之外，还需要收集一些浏览器信息，以预期的 JSON 格式包装，然后发布——这不应该超过几 KB min+gz。 应该是？

@mindplay-dk 我们不在客户端执行任何堆栈跟踪解析。 这一切都在服务器上完成，这就是为什么您需要首先上传源地图以获得对它们的支持。

我们所做的是：

• 事件处理器提供自定义挂钩，允许您修改/过滤/增强发送到 Sentry 的数据
• 处理所有原生 API 包装
• 从所有用户交互、网络调用、导航中捕获面包屑
• 提取用户代理数据
• 从链接错误中提取额外的错误数据，因此您可以像其他语言一样制作多个错误级别
• 监听两个全局错误处理程序
• 提供多种网络传输，以便用户始终获得最适合其当前环境的网络传输
• 处理十分之一的边缘情况和各种错误（甚至是自定义错误）对象和各种本机实现
• 提供备用或损坏的错误信息的备用
• 缓冲事件，这样您就不会在出现问题时淹没自己的 Sentry 实例或耗尽可用事件

仅举几个。 我真的希望它像“捕获错误，添加一些数据并发送它”一样简单。
然而，在现实世界中，有数十个输入、数十个错误来源（它们都提供不同的数据）和数十个行为不同的环境。
我们肯定会继续努力将其降低到 ~10-15kB，但这需要一些时间。 我们现在可以花费的资源（阅读人员/时间）只有这么多。

我知道现在部署数兆字节的 JS 是很常见的，但我们在工作中有严格的内容政策，以确保我们交付的项目可以在移动设备上快速加载，我无法证明将超过一半的 JS 预算用于错误 -日志记录 - 最高可能是 10%，所以大约 15-20 KB 似乎是合理的。

然后您可以使用我们的加载器 – https://docs.sentry.io/platforms/javascript/loader/ :)

然后您可以使用我们的加载器 – https://docs.sentry.io/platforms/javascript/loader/ :)

但遗憾的是 webpack 没有解决方案

仅举几个。 我真的希望它像“捕获错误，添加一些数据并发送它”一样简单。

也许有人应该在tc39提出一些建议。 我将不得不看看这个过程是如何的，但也许有人可以提出一个标准化的 API 来读取堆栈跟踪

但遗憾的是 webpack 没有解决方案

你到底是什么意思？ 有一个可以与加载器共存的包，可以导入和捆绑，但是一旦发生错误或捕获异常调用，就可以与异步加载的 SDK 通信？

你到底是什么意思？ 有一个可以与加载器共存的包，可以导入和捆绑，但是一旦发生错误或捕获异常调用，就可以与异步加载的 SDK 通信？

是的，如果我正确地回顾一下，加载器只能通过 CDN 获得

@cromefire是的，因为它旨在用作“片段”。 但是你可以在这里找到它的代码https://github.com/getsentry/sentry-javascript/blob/master/packages/browser/src/loader.js

好像我必须打开一个新的 PR，因为使用esm这也可以从您自己的代码中使用

我们即将推出一个解决方案，让您可以将loader与minimal $ 一起使用，并且实际上只会在您的最终捆绑包中添加几 kB。

编写一个加载在 1kb 以下的加载器应该不难，所以为什么不呢，我会尝试写一个快速的

在这里可以提供很大帮助的一件事是，如果某些功能是可选的。

例如，一个非常好的最低限度可能是：

• 本机错误堆栈跟踪（不要关心它在某些浏览器上不是最佳的）
• 用户代理
• 时间戳
• 网址
• 与服务器上的源映射匹配

任何附加功能都可以只是附加功能。 我们只支持现代浏览器，因此我们不需要解决旧浏览器的所有古怪行为。

我们通过使用 webpack 代码拆分和仅在错误时加载哨兵客户端解决了这个问题。

sentry.js

import * as Sentry from '@sentry/browser';
Sentry.init({
  ...
  integrations: integrations => {
    return integrations.filter(integration => integration.name !== 'GlobalHandlers');
  },
});
export const logError = error => Sentry.captureException(error);

errors.js

const captureError = async error => {
 const { logError } await import(/* webpackChunkName: "sentry" */ './sentry');
 logError(error);
}
window.onerror = (message, url, line, column, error) => captureError(error);
window.onunhandledrejection = event => captureError(event.reason);

我们在那里做更多的事情，比如填充面包屑，添加额外的，添加标签等。但是可以使用哨兵客户端而不是让你的包更大。

这有点像我在 #1846 中实现的

可能对其他人有帮助：
我通过 webpack ( 4.29.5 ) 使用 ESM 构建：

• 添加 webpack 别名以使用 ESM 构建而不是标准构建，因为 $ package.json中没有module声明

resolve: {
    alias: {
        // use sentry ESM build which is not declared in the @sentry/browser package.json
        '@sentry/browser': path.resolve(
            __dirname,
            'node_modules/@sentry/browser/esm',
        ),
    }

• 在我们的babel-loader配置中添加sentry/.+/esm的排除项，因为似乎 ESM 构建包含比 ES2015 更新的功能。

{
    test: /\.m?jsx?$/,
    loader: 'babel-loader',
    // compile sentry as the ESM build is new and ships modern features which break our supported browsers
    exclude: /(node_modules\/(?!(@sentry\/[^/]+\/esm))|bower_components)\//,
}

笔记：

• 我们使用了别名，因此我们在代码中使用它时不必担心捆绑（我们对lodash-es做类似的事情）

@Limess

您可以重定向到@sentry/browser/esm ：

resolve: {
    alias: {
        // use sentry ESM build which is not declared in the @sentry/browser package.json
        '@sentry/browser': '@sentry/browser/esm'
    }

但是你不需要添加别名，只需要导入@sentry/browser/esm

对于加载器来说，这样写更容易：

• 如果你在 babel 中还有其他东西：

{
    test: /other_things/,
    include: [/@sentry\/.+\/esm/],
    exclude: /node_modules/,
    // config
}

• 如果您不这样做：

{
    test: /@sentry\/.+\/esm/,
    exclude: /node_modules/,
    // config
}

还要记住根据需要自定义 babel 配置： babel docs ，否则不值得使用 esm 版本

更新：我们将很快发布 SDK 的新主要版本，这将显着减小包大小。

26.1 kB - https://bundlephobia.com/result?p=@sentry/browser @4.6.4
对比
17.2 kB - https://bundlephobia.com/result?p=@sentry/browser @5.0.0-rc.1

我们预建的 CDN 版本甚至显示出更好的结果（不确定捆绑恐惧症如何衡量东西）

ES6:  14.3535 kB
ES5:  15.6846 kB

无论如何，我想让您知道，我们仍在努力进一步减少捆绑包的大小，但这应该已经是朝着正确方向迈出的一大步。

升级注意事项：这是一个重大的问题，因为 SDK 中有许多内部更改。 您不需要进行任何代码更改。 我们目前正在 sentry.io 上自己测试新版本，以了解它的行为方式。 参考： https ://github.com/getsentry/sentry/pull/12492

免责声明：不要像我们一样在生产中使用5.0.0-rc.x 🙈

@HazAT感谢您认真对待这件事！ 这是向前迈出的一大步——我现在已经不太关心部署它了 :-)

@kamilogorek出于好奇，您能否将3.x分支的最后一个版本添加到比较中？

我要结束这个问题了，到目前为止，我们认为，我们从 v4 到 v5 引入的减少是朝着正确方向发展的趋势。 我们仍将尝试进一步减少它，并且我们将非常有意识地再次增加它。

作为一个简短的评论，我们真的只想比较我们的“捆绑”大小，因为根据您使用的捆绑器，您的里程可能会有所不同，所以这里是我们运送的 CDN 捆绑号（ped）：

| 包装 | 版本 | 字节大小 | 以 kB 为单位的大小 | 链接 |
|-----------------|---------|--------------|----- -------|------------------------------------------ ----------|
| 乌鸦-js | 3.27.0 | 13741 字节 | ~13.4kB | https://cdn.ravenjs.com/3.27.0/raven.min.js |
| @sentry/浏览器 | 4.6.6 | 22607 字节 | ~22.1kB | https://browser.sentry-cdn.com/4.6.6/bundle.min.js |
| @sentry/浏览器 | 5.0.3 | 16059 字节 | ~15.7kB | https://browser.sentry-cdn.com/5.0.3/bundle.min.js |

在 v5 中，我们还发布并构建esm ，这意味着如果您使用的是捆绑器，它应该能够对未使用的代码路径进行 treeshake。

谢谢大家的耐心🙇

@HazAT @kamilogorek太棒了！

@Limess今天使用它是否仍然相关： @sentry/browser/esm而不是@sentry/browser ？

它像import * as Sentry from "@sentry/browser/esm";一样导入并与webpack -p捆绑在一起，但我发现捆绑包大小没有区别。 我也有一个没有插件或加载器的裸webpack.config.js 。

@0xbkt捆绑大小没有区别，至少现在使用汇总捆绑应用程序时。