웹 패키지+react-rails 환경에서react-component를 사용할 때만 필요한 자산을 읽습니다

개시하다

웹 패키지 + react-rails를 사용하여 Rails 프로젝트에서 React를 가져왔습니다.

javascript_pack_tag 자산 읽기

react_component에서 React 구성 요소 읽기

조작 매뉴얼에 따라 만들었지만 웹 페이지로 인코딩된 js는 상당히 크다.(이것은 당연한 것이다.)
그리고 리액트는 부분적인 도입만으로 모든 페이지에서 사용할 수 있는 것이 아니어서 사이트의 속도에 영향을 미쳐 고통스럽다.
말은 그렇지만 매번 자산의 읽기와 react_component의 기술을 함께 쓰는 것은 고통스럽다.
이에 따라 리액트 구성 요소를 사용하는 페이지에서만 자산을 읽기 위해 도우미를 제작했다.

해본 일

레이아웃 파일을 먼저 수정합니다.
app/views/layouts/application.slim

  head
    = javascript_include_tag 'application'
-   = javascript_pack_tag 'application'
+   = yield :webpacker_assets

랩react_component으로 싸인 조수를 추가합니다.
app/helpers/application_helper.rb

def render_react_component(*args, &block)
  content_for :webpacker_assets do
    assets = []
    assets << javascript_pack_tag('application')
    assets << stylesheet_pack_tag('application')
    assets.join("\n").html_safe
  end
  react_component(*args, &block)
end

지금까지 사용한 부분react_component을 교체합니다.

- = react_component('Hoge', props)
+ = render_react_component('Hoge', props)

yield, content_for 편하네~
그게 다야.

참고 자료

rails/webpacker: Use Webpack to manage app-like JavaScript modules in Rails

reactjs/react-rails: Integrate React.js with Rails views and controllers, the asset pipeline, or webpacker.