Webpackのtree shakingと副作用のあるimport

2022年11月17日

副作用のあるimportとは、import対象のモジュール(ファイル)を読み込んだタイミングで何かしらの処理が実行されることです。

例えば以下は、hoge.jsを読んだタイミングでコンソールにhogehogeが出力されます。

console.log('hogehoge')
export const hoge = () => 'hoge'

import { hoge } from './hoge.js'
const result = hoge()
console.log(result)

main.js では hoge 関数が必要なためインポートをしますが、先にhogehogeがコンソールに出力され、その後 result が console.log によって出力されます。

hogehoge
hoge

webpackを使用した場合、もし、インポートしたモジュールが副作用だけだった場合、そのコードはビルド後から削除される動きになります。

以下のようなソースをwebpackでビルドすると tree shaking によって、hoge.js は含まれなくなるため、コンソールには main とだけ表示されます。

console.log('hogehoge')

import './hoge.js'
console.log('main')

副作用を起こしたい場合(hogehoge もコンソールに出力させたい場合)は、package.json に sideEffects を追加します。

{
  // some setting
  "sideEffects": ['./hoge.js']
}

これで webpack に対して、「hoge.jsは副作用があるよ」ということを伝えられるので、webpackはtree shaking時にhoge.jsを落とさなくなります。

楽しかったこと