rch850 の上澄み

技術的な話題とか、雑談とか。タイトルを上澄みに変えました @ 2020/09/02

本番環境での source maps についてのご意見たち

source maps ってあるじゃないですか。難読化、圧縮された JavaScriptCSS から、難読化前の場所を復元してくれるあれ。

デバッグを容易にするという点で source maps が有用なのは誰もが認めるところです。

では本番環境ではどうするか。作る?公開する?色々なところからのご意見をまとめました。

webpack

webpack は本番でも source maps を持っておくことを推奨しています。

We encourage you to have source maps enabled in production, as they are useful for debugging as well as running benchmark tests.

Production | webpack より

しかし公開すべきではないとしています。

You should configure your server to disallow access to the Source Map file for normal users!

Devtool | webpack より

DHH

DHH は source maps 公開して知見を共有しようぜという姿勢です。

このツイートについてはこちらの記事が詳しいです。

kyamashiro.hateblo.jp

CSS Tricks

こちらも公開して知見を広めようぜという姿勢です。

css-tricks.com

  1. It might help you track down bugs in production more easily
  2. It helps other people learn from your website more easily

まとめ

source maps を作ること自体は、参考にした3つの意見すべて賛成でした。source maps を作るには追加のビルド時間がかかるというデメリットもありますが、これは許容するようです。

しかし公開するかどうかは意見が分かれました。趣味の開発ならともかく、業務での開発となると、非公開を選ぶことが多そうに思えます。

余談

いくつかのフロントエンドのログ集約サービスの source maps 対応状況です

サービス 対応状況
Sentry 対応している
New Relic 対応している
TrackJS 対応している
Rollbar 対応している
Loggly 対応していない