kyoncyの日記

Webpackerでwebpack-bundle-analyzer、CircleCIのテストで落ちない対処法

December 26, 2019

※ この記事に設定している画像はあえてモザイクをかけています。

Webpacker 使ってるアプリケーションに webpack-bundle-analyzer を導入して CircleCI でつまづいた話です。

なぜ webpack-bundle-analyzer を導入しようと思ったのかは mizchi さんの Qiita の記事 を通勤中に読んでて、lodash 使いまくってる気がするなぁと感じたからです。

おっ、webpack-bundle-analyzer の issue にそれらしきものがあるぞ。試してみよう。

おぉ!表示された!なかなか綺麗に表示してくれる。2 つ目に思ったこと、lodash が場所を占有しすぎている。まぁ lodash の排除は年明けに行うとしよう。

実行の確認もできたし特に問題はなさそう。PUSH。

後は CircleCI、君に任せた。

あれ、テストで落ちてる。deadline exceeded。なぜだろう。

  • Rails6 にあげてるから?
  • development.js だけじゃなく test.js にも同じ記述する必要ある?
  • そもそも記述が間違ってる?

と検証してると options が怪しそう。webpack-bundle-analyzer の README に書いてあるじゃん。以下に修正。

process.env.NODE_ENV = process.env.NODE_ENV || "development"

const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer")
const environment = require("./environment")

environment.plugins.append(
  "BundleAnalyzer",
  new BundleAnalyzerPlugin({
    openAnalyzer: false, // ブラウザの立ち上げる設定
    analyzerMode: "static", // 'server', 'static', 'disabled'
  })
)

module.exports = environment.toWebpackConfig()

無事に CI 通過し一件落着。

react-app-rewired 使って webpack.config の内容を上書きしてるアプリケーションの方も記事がたくさんあったのですんなり導入できた。


NPO法人みんなのコード → HiTTO株式会社(現職)でフロントエンド担当しています きょんしー🐧です。
Twitter, Zennやってます。React, TypeScript, GraphQL 書いてます。土日は開発したり読書したり都内を散歩してます。ボドゲにハマってるので欲が高まってます。

Githubの草情報

Githubの草情報
© 2021 kyoncy