Ruby on Rails整合TailwindCSS与React后webpack编译过慢如何优化？

解决方案 #

核心问题是你当前将Tailwind样式和React业务代码打包在同一个webpack入口中，所以任意修改入口内的资源都会触发包含Tailwind全量样式的编译，导致速度极慢，按以下步骤调整即可：

1. 拆分webpack入口，解除样式和JS的编译绑定
   删除app/javascript/packs/application.js中的import "stylesheets/application"代码行。
   在app/javascript/packs/目录下新建独立样式入口tailwind_styles.js，仅保留样式引入：

// app/javascript/packs/tailwind_styles.js
import "stylesheets/application"

2. 调整布局文件的资源引用规则
   修改app/views/layouts/application.html.erb中的样式包引用，将原来绑定JS入口的样式包替换为独立的样式入口：

// app/views/layouts/application.html.erb
...
   <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= stylesheet_pack_tag 'tailwind_styles', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'index' %>
  </head>
...

3. 修正Tailwind引入顺序（可选但建议）
   你当前的Tailwind样式引入顺序有误，会导致组件样式覆盖工具类，调整app/javascript/stylesheets/application.css的引入顺序：

// app/javascript/stylesheets/application.css
@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

4. 开启webpacker增量编译（进一步提速）
   修改config/webpacker.yml的development配置段，开启缓存和增量编译：

development:
  <<: *default
  compile: true
  cache: true
  incremental_compilation: true

调整完成后重启开发服务，修改React代码时只会编译JS相关的包，不会触发Tailwind样式的重编译，编译耗时可以降到3秒以内。

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