Next.js × Webpack で本番ビルド時にconsole.logを出力しない設定や、コメントを削除する設定について

こんにちは、AIQ株式会社のフロントエンドエンジニアのまさぴょんです！
今回は、Next.js × Webpack で本番ビルド時にconsole.logを出力しない設定や、コメントを削除する設定について、ご紹介します🐱

Next.js × Webpackでビルド時にconsole.logやコメントを削除する

Next.js × Webpack で本番ビルド時にconsole.logやコメントを削除するには、
terser-webpack-pluginというライブラリを使用します。
terser-webpack-pluginは、JavaScriptを圧縮するWebpackのプラグインになります。

terser-webpack-pluginをinstallする

次のコマンドで、terser-webpack-pluginを追加します。

yarn add -D terser-webpack-plugin

next.config.jsに設定を追加する

続いて、next.config.jsにビルド時にconsole.logやコメントを削除する設定を追加していきます。
追加しているのは、--- ここから ---、--- ここまで ---の間のSrcCodeと、terser-webpack-pluginのrequireの箇所になります。

next.config.js

const TerserPlugin = require('terser-webpack-plugin');

const removeImports = require('next-remove-imports')({
  test: /node_modules([\s\S]*?)\.(tsx|ts|js|mjs|jsx)$/,
  matchImports: '\\.(less|css|scss|sass|styl)$',
});

module.exports = removeImports({
  webpack: (config, options) => {

    // ----- ここから本番環境で、console.log を出力しない系の設定 -----
    config.optimization.minimize = true;
    config.optimization.minimizer = [
      new TerserPlugin({
        // Build時に console.log を削除する
        terserOptions: {
          compress: { drop_console: true },
        },
        // LICENCE 情報を残してその他のコメントを削除する
        extractComments: 'all',
      }),
    ];
   // ----- ここまで本番環境で、console.log を出力しない系の設定 -----

    return config;
  },
});

(おまけ1) console系の処理を置き換える方法もある

こちらの記事の内容のように、console系のメソッドをすべて置き換えるというやり方もあるようです。

App.tsx

function App() {
  if (import.meta.env.VITE_APP_ENV === 'prod') {
    // 本番環境の場合、コンソール出力を無効にする
    console.log = console.info = console.debug = console.warn = console.error = () => {};
  }
  return (
    <>
      <Provider>
        <RouterProvider router={router} />
      </Provider>
    </>
  )
}

export default App

https://zenn.dev/mameta29/articles/9743f513484520

おまけ2: esbuild(Viteなど)の場合は、consoleを消すオプションがある

esbuild(Viteなど)の場合は、consoleを消すオプションがあるようです👀🌟

esbuildはバンドルツールであり、viteはこれに依存している。
esbuildにconsoleを消すオプションがあり、viteからesbuildのオプションを使うことでlog消しを実現しているっぽい。
引用元: Viteのbuild時にconsole.logを消す時のメモ

vite.config.ts

export default defineConfig({
    esbuild: {
      drop: ['console', 'debugger'],
    },
});

production時のみconsole消す場合は、次のような形になる。

vite.config.ts

import { defineConfig, loadEnv } from 'vite'

export default defineConfig(({ mode }) => {
	const envPrefix = ['VITE_', 'APP_ENV']
	const env = loadEnv(mode, '.', envPrefix)
	return {
	...
		esbuild: {
			drop: env['APP_ENV'] === 'production' ? ['console', 'debugger'] : [],
		},
	}
})

https://zenn.dev/misaki_gogo/articles/561ea70ca4bc0b

まとめ・感想

本番ビルド時にconsole.logを出力しない、コメントを削除する設定は、地味に大事だと思うので、忘れずに設定しておきたいと思いました💪🥺✨

Xやっております！よかったらフォローしてください🐱
https://twitter.com/masanyon1212

注意事項

この記事は、AIQ 株式会社の社員による個人の見解であり、所属する組織の公式見解ではありません。

求む、冒険者！

AIQ株式会社では、一緒に働いてくれるエンジニアを絶賛、募集しております🐱🐹✨

詳しくは、Wantedly (https://www.wantedly.com/companies/aiqlab)を見てみてください。

参考・引用

https://zenn.dev/manase/scraps/793ebaaa122146

https://github.com/webpack-contrib/terser-webpack-plugin#options

https://t-cr.jp/memo/20817942cf9bf53dc

https://zenn.dev/mameta29/articles/9743f513484520

https://qiita.com/qrusadorz/items/47152545ac82b999b214