首页 > 解决方案 > Webpacker 在公共/资产中缓慢和重复文件

问题描述

使用 Rails / Webpacker 编译资产。

Webpacker 开始变得非常慢(3 分钟编译时间)。我注意到该public/assets文件夹​​中充满了指纹资产,例如..

application-1e69eb85a81f4a963fde.js application-828cf61e1e6dc295ffee.js application-95ba1bc02eaf571bca3d.js

每次页面刷新都会创建新的。

我在开发模式下启动服务器,我不确定为什么每次刷新都会产生一个新的指纹资产。但我的猜测是这就是导致问题的原因。

有没有人经历过这个?

webpack.yml

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

default: &default
  source_path: client
  source_entry_path: bundles
  public_output_path: assets/bundles # outputs to => public/assets/bundles
  cache_path: tmp/cache/webpacker
  cache_manifest: false

  extensions:
    - .jsx
    - .js
    - es6.js
    - .sass
    - .scss
    - .worker
    - .worker.js
    - .css
    - .module.sass
    - .module.scss
    - .module.css
    - .png
    - .svg
    - .gif
    - .jpeg
    - .jpg
    - .eot
    - .svg
    - .ttf
    - .woff

development:
  <<: *default
  compile: true

  # Reference: https://webpack.js.org/configuration/dev-server/
  dev_server:
    https: false
    host: localhost
    port: 3035
    public: localhost:3035
    hmr: true
    # 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
    headers:
      'Access-Control-Allow-Origin': '*'
    watch_options:
      ignored: /node_modules/


test:
  <<: *default
  compile: true

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

production:
  <<: *default

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

  # Cache manifest.json for performance
  cache_manifest: true

标签: ruby-on-railsruby-on-rails-6webpacker

解决方案


我正在添加这个答案,以便它可以帮助其他用户。

如果您不想在不重新加载浏览器的情况下更新 js 文件,请关闭 hmr 设置。

hmr: false

In RAILS, webpacker.yml has different settings, and one of those is hmr, which is Hot Module replacement, a Webpack feature that updates your Javascript without a browser reload. The 'module' in hot module replacement just refers to each of your Javascript source code files. To make these updates happen, Webpack installs the HMR Runtime into your output bundle.

for more details about HMR- CHECK THIS


推荐阅读