Gatsbyでのビルド時にsource mapが出力されないようにする

はじめに

このブログをGatsbyで作り始めてから3年が経とうとしている。記事の数も大きくなり、それに伴ってビルドサイズも大きくなってきた。

ブログをデプロイしているFirebaseHostingの無料枠が10GBということもあり、少しでもサイズを小さくしたいなと思ってビルド成果物を眺めていたところ、.js.mapというソースマップファイルが含まれていることに気づいた。

本番用のビルドでソースマップファイルは特に必要がないため、これを出力されないようにしたい。

設定方法

調べてみると、gatsby-plugin-no-sourcemapsという公式のプラグインがあった。

• https://www.gatsbyjs.com/plugins/gatsby-plugin-no-sourcemaps/

まずはインストール。

npm install gatsby-plugin-no-sourcemaps

あとはgatsby-config.jsにプラグインとして追加するだけで設定は完了した。

module.exports = {
  // ...
  plugins: [
    {
      resolve: "gatsby-plugin-no-sourcemaps",
    },
  ],
  // ...
}

ちなみにプラグインの中身を見てみたが、以下の処理をしているだけだった。プラグインを追加したくない場合は、gatsby-node.jsに以下の処理を追加するだけで対応は可能となる。

exports.onCreateWebpackConfig = ({ stage, actions }) => {
  if (stage === `build-javascript`) {
    actions.setWebpackConfig({
      devtool: false,
    })
  }
}

おわり

これでソースマップファイルは出力されなくなったものの、自分のブログの場合は特にビルドサイズを大きく削減できたわけではなかった。

画像についてはすでにリサイズ処理をして最適化したし、もし無料枠の10GBで足りなくなった際はプラットフォームを変えるのが手っ取り早そう。