Webpacker资产包大小

Question

我刚刚在我的站点上部署了一个更改，但是仅在生产环境中出现此错误：

  01 WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
  01 This can impact web performance.
  01 Assets:
  01   media/images/gallery-feature-bg-cde3a3757c552a1fcd59ff149fc615dd.png (1.58 MiB)
  01   media/images/neil_photo-4e1fe99c16fe48fd2f0fd8c6213f2a4c.png (1.76 MiB)
  01   js/application-f25183b6442d6f9fb906.js (534 KiB)
  01   js/application-f25183b6442d6f9fb906.js.map.gz (524 KiB)
  01   js/application-f25183b6442d6f9fb906.js.map.br (440 KiB)
  01
  01 WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can i…
  01 Entrypoints:
  01   application (693 KiB)
  01       css/application-d8e632aa.css
  01       js/application-f25183b6442d6f9fb906.js

显然，由于我有webpacker处理所需的一些图像的事实，因此编译输出的大小将更大。那个我能接受。我一直在网上看到有关如何禁用此警告的建议，但是由于我将webpacker用作webpack包装器，因此我不确定如何实现这些建议。

我尝试添加devtool: none和

performance: 
    hints: false

到我的webpacker.yml文件，但似乎没有任何作用。如何禁用此警告并在webpacker中执行此操作？

Answer 1

对于Webpacker，您可以如下设置webpack的performance configuration：

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.config.merge({
  performance: {
    hints: false
  }
})

module.exports = environment

配置选项还允许您将最大大小限制设置为更宽松。

另外，您得到警告的事实很好地表明您可以从webpack的代码拆分功能（例如dynamic imports）中受益。换句话说，对于一个稍有不同的问题，更好的答案是“减小构建大小”]

我不建议禁用devtool来专门解决此问题；通过构建大小以及调试实用程序和其他折衷方法，可以决定是否使用源映射以及使用哪个决策。例如，您可能会决定使用不同的sourcemap option作为更好的大小/实用性权衡：

// config/webpack/environment.js

const { environment } = require('@rails/webpacker')

environment.config.merge({
  devtool: 'cheap-source-map'
})

module.exports = environment