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 の内容を上書きしてるアプリケーションの方も記事がたくさんあったのですんなり導入できた。


きょんしー

新卒1年目の きょんしー🐧 です。みんなのコードで働いてます。Twitter, Facebookやってます。React, Blockly, Renovate, CircleCIが好き。Typescriptがっつり書きたいので機会模索中。土日は開発したり本を読んでます。開発したすぎてブログ書くよりレイアウト変えてる。経歴とかはWantedlyに記載してます。