🤮
【初心者】Uglifierとは
状況
- 記事を一括で作成するために新たにJavaScriptファイルを作成
- 動作確認やテストは通過したものの、deploy時にエラー発生
- 予想外だったため慌ててしまった。今後の注意も含めて記録
Uglifierについて
Uglifierとは?
- Uglifierは、JavaScriptコードを最適化・圧縮するためのツール
- 主な機能は:
- コードの圧縮
- 空白や改行の削除
- 変数名の短縮化
- コメントの削除
- 最適化
- 不要なコードの削除
- コードの結合
- 実行速度の向上
例えば以下のようなコードを:
function calculateTotal(price, quantity) {
// 合計金額を計算
var total = price * quantity;
return total;
}
このように圧縮する:
function c(p,q){return p*q}
エラーの内容
本番環境へのデプロイ中に rake assets:precompile
の処理が失敗している
エラーログの内容を見ると、Uglifier::Error: Unexpected character '
'` というエラーが発生
(省略)
このエラーは、バッククォート (`) を使ったテンプレートリテラル が原因で発生とのこと
エラーの発生原因
-
Uglifier が ES6+ の構文をサポートしていない
- デプロイ環境の
uglifier
が ES6 のテンプレートリテラル (バッククォート`
) を適切に処理できていない -
Uglifier
はデフォルトでは ES5 のみ をサポートしており、ES6 以降の構文が含まれるとエラーになる
- デプロイ環境の
-
JavaScript コード内で ES6 の構文を使用している
- 本番環境では
rake assets:precompile
の際にUglifier
を使って JavaScript を圧縮・最適化する -
Uglifier
の設定が ES6 に対応していない場合、テンプレートリテラル
やlet/const
などの ES6 の構文があるとエラーになる
- 本番環境では
解決方法
方法 1: Uglifier の設定を変更する
config/environments/production.rb
の config.assets.js_compressor
の設定を変更します。
config/environments/production.rb
を開く- 以下のコードを修正する
config.assets.js_compressor = Uglifier.new(harmony: true)
harmony: true
を指定することで、Uglifier が ES6+ の構文をサポートできるようになる
- 変更を反映
git add config/environments/production.rb
git commit -m "Enable ES6 support in Uglifier"
git push
方法 2: ES6 の構文を ES5 に書き換える
エラーが発生している バッククォート () を使ったテンプレートリテラル** を **従来の文字列結合 (
+`) に修正 する
(省略)
最適な対応
-
config.assets.js_compressor = Uglifier.new(harmony: true)
に変更するのが 一番簡単な修正方法 です。 - ES6 の構文を ES5 に書き換える のは、ES6 の機能を使いたい場合は非推奨
今後の注意点
- アセット関連
- 新しいJavaScript機能を使用する際は、必ずプリコンパイルをテスト
- 必要に応じて
harmony: true
オプションの追加を検討
- セキュリティ
- 機密情報(APIキーなど)は環境変数で管理
- エラー表示は必要最小限に
- パフォーマンス
- キャッシュの設定を適切に管理
- 不要なログ出力を制限
- モニタリング
- ログレベルの適切な設定
- エラー通知の確実な設定
これらの設定を適切に管理することで、安全で安定した本番環境を維持できる
所見
- 最初見た時、何じゃそりゃ。こんなの予想できないわ。。と思ったが、
テスト環境でもプリコンパイルテストができると理解。そのテストはしてなかったことが行動としての原因と判明。防げるエラーだったと反省。 - 今後はJavaScriptファイル修正後はプリコンパイルテストも忘れないようにしたい
Discussion