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