JavaScript
webpack
React

module.hot.acceptの速度の改善

More than 1 year has passed since last update.

問題

react-hot-loader@3でmodule.hot.acceptで指定する差し替え先は1つのファイルだと思います。

特定の
if (module.hot) {
  module.hot.accept('./containers/app', () => {
    require('./containers/app').default
    init()
  })
}

このmodule.hot.acceptで、差し替え先を省略すると遅くなりました。

すべてのファイル
module.hot.accept(() => {
  require('./containers/app').default
  init()
})

ファイルの量が多いと1秒以上かかってしまいます。

その他

main.js
import React from 'react'
import { render } from 'react-dom'
import { AppContainer } from 'react-hot-loader'
import { App } from './containers/app'

function init () {
  render(
    <AppContainer>
      <App/>
    </AppContainer>,
    document.querySelector('.root')
  )
}

setTimeout(init, 1000)

if (module.hot) {
  module.hot.accept('./containers/app', () => {
    require('./containers/app').default
    init()
  })
}
containers/app.js
import React, { Component } from 'react'

class App extends Component {
  render () {
    return <div>
      hello, world!
    </div>
  }
}

export { App }

参考

Hot Module Replacementの設定と仕組みを理解する