assets:precompile RAILS_ENV=productionを実行するとWARNING in asset size limitという警告が表示される

Question

現在Docker + Rails　環境でアプリを作成しています。

EC2でアプリが動作しないためローカルでproductionモードで動作させています。
具体的には各コマンドの末尾にRAILS_ENV=productionをつけて

1. DBを作成(rails db:create)
2. マイグレーションを実行(rails db:migrate)
3. シードデータを投入
4. プリコンパイル(rails assets:precompile)

というところまで来ています。

ただ、docker-compose run --rm web rails assets:precompile RAILS_ENV=productionというコマンドを実行したところ
下記のような警告が表示されました。

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  js/application-e2fa607a36268bd325e5.js (1.34 MiB)
  js/tops-3552fb8f1ed147cabba5.js.map.gz (261 KiB)
  js/application-e2fa607a36268bd325e5.js.gz (493 KiB)
  js/application-e2fa607a36268bd325e5.js.map.gz (720 KiB)
  js/application-e2fa607a36268bd325e5.js.br (408 KiB)
  js/application-e2fa607a36268bd325e5.js.map.br (595 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  application (1.34 MiB)
      js/application-e2fa607a36268bd325e5.js


WARNING in webpack performance recommendations:
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/@ttskch/select2-bootstrap4-theme/dist/select2-bootstrap4.min.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js??ref--6-1!node_modules/postcss-loader/src/index.js??ref--6-2!node_modules/select2/dist/css/select2.css:
    Entrypoint mini-css-extract-plugin = *
       2 modules

このWARNINGを解消するにはどうすればいいのか調べてみると
[webpack] WARNING in asset size limit、と出たときの対処法
という記事が見つかりましたが、
Rails(webpacker)ではどのようにすればよいのか全くわかりません。
もしわかる方がいらっしゃればご教授いただきますようよろしくお願いいたします(m_ _m)

動作環境

Ruby: 2.5.7
Rails: 6.0.3.5
Docker for Mac: 2.2.0.5

期待する動作

• 上記のWARNINGログが表示されなくなること
• 動作が軽くなること

該当しそうなコード

config/webpacker.yml(1/2)

# Note: You must restart bin/webpack-dev-server for changes to take effect

default: &default
  source_path: app/javascript
  source_entry_path: packs
  public_root_path: public
  public_output_path: packs
  cache_path: tmp/cache/webpacker
  check_yarn_integrity: false
  webpack_compile_output: true

  # Additional paths webpack should lookup modules
  # ['app/assets', 'engine/foo/app/assets']
  resolved_paths: []

  # Reload manifest.json on all requests so we reload latest compiled packs
  cache_manifest: false

  # Extract and emit a css file
  extract_css: false

  static_assets_extensions:
    - .jpg
    - .jpeg
    - .png
    - .gif
    - .tiff
    - .ico
    - .svg
    - .eot
    - .otf
    - .ttf
    - .woff
    - .woff2

  extensions:
    - .mjs
    - .js
    - .sass
    - .scss
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg

development:
  <<: *default
  compile: true

  # Verifies that correct packages and versions are installed by inspecting package.json, yarn.lock, and node_modules
  check_yarn_integrity: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: 0.0.0.0
    port: 3035
    public: 0.0.0.0:3035
    hmr: false
    # Inline should be set to true if using HMR
    inline: true
    overlay: true
    compress: true
    disable_host_check: true
    use_local_ip: false
    quiet: false
    pretty: false
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: '**/node_modules/**'


test:
  <<: *default
  compile: true

  # Compile test packs to a separate directory
  public_output_path: packs-test

production:
  <<: *default

  # Production depends on precompilation of packs prior to booting for performance.
  compile: false

  # Extract and emit a css file
  extract_css: true

  # Cache manifest.json for performance
  cache_manifest: true

config/webpack/production.js

process.env.NODE_ENV = process.env.NODE_ENV || 'production'

const environment = require('./environment')

module.exports = environment.toWebpackConfig()

Comments

[hoshi-takanori]

警告なので、制限値 (244 KB) をちょっと超えたくらいなら無視すれば…と思ったら、1.34 MB ってかなり大きいですね。JS のライブラリをたくさん追加しましたか？ それとも、画像などでしょうか？

[begenner]

最近asset:compileして気付いたのでJSのライブラリか画像かどちらかわからないです(m_ _m)
ただ可能性としてあるのは画像かなと思います。

Answer 1

自分も同じようなことになったので報告。

どうもassetsとwebpackerで干渉してたものがあったらしく、
gemfileからjquery-railsとbootstrapを削除。

そのエラーは出なくはなりました。