Rails 6 CSS与JS托管方案：asset pipeline/webpacker/CloudFront哪个效率最高？

最高效的CSS/JS服务方案 #

• 首先替换已停止官方维护的webpacker，推荐使用社区维护的shakapacker（原webpacker继任版），或是更轻量的jsbundling-rails + cssbundling-rails组合，全量托管CSS/JS资产。针对迁移失败的semantic-ui CSS，可直接通过npm安装semantic-ui-css包，在JS入口文件中添加import 'semantic-ui-css/semantic.min.css'即可完成引入，完全脱离asset pipeline。
• 解决渲染阻塞核心问题：首屏必要的critical CSS直接内联到HTML的<head>标签中，非首屏CSS使用动态加载逻辑引入，或暂时标记media="print"、加载完成后切换为media="all"避免阻塞渲染；非首屏必需的JS资源添加async/defer属性异步加载，不要同步放在<head>中。
• 开启资产优化配置：开启gzip/brotli压缩，给所有静态资源配置带hash的文件名和永久缓存头，避免用户重复加载未变更的资源；按路由/功能拆分打包后的代码块，按需加载对应资源，不要打包成单个大体积的CSS/JS文件。
• 条件允许的情况下接入CDN服务，将所有静态资源托管到CDN，Rails侧仅需配置config.asset_host为CDN地址即可，静态资源请求直接由CDN响应，不需要打到应用实例。

Heroku Hobby Tier对加载速度的影响 #

Heroku Hobby Tier确实是导致加载速度慢的重要因素，影响主要来自三方面：

• 该档位使用共享CPU、内存资源，流量稍高就会出现资源争抢，静态资源的响应延迟会明显升高。
• 无内置CDN服务，所有静态资源请求都需要由应用实例处理，进一步占用本就有限的实例性能。
• 存在实例休眠机制，长时间无访问后实例会自动休眠，首次访问的冷启动时间可达数秒，会大幅拉低Lighthouse的性能评分。

内容的提问来源于stack exchange，提问作者Leon Lim