React-Router4 按需加載的4種實現

其實幾種實現都是近似的，但具體上不太一樣，其中有些不需要用到bundle-loader

 

第一種：ReactTraining/react-router 介紹的基於 webpack, babel-plugin-syntax-dynamic-import, 和 react-loadable.

主要是利用了react-loadable這個高級組件，他是專門用來異步加載（也可以預加載）組件的。

https://github.com/ReactTraining/react-router/blob/master/packages/react-router-dom/docs/guides/code-splitting.md

 

第二種：SF網友介紹的Bundle組件配合webpack組件bundle-loader

bundle-loader效用其實和require.ensure()一樣，把組件分片成單獨的chunk，在Bundle組件中引入

https://segmentfault.com/a/1190000009539836

 

但是我嘗試的時候發現總是報錯說不要在import中引入webpack的loader。。。

然后我繼續查，發現第三種實現

 

第三種：簡書AlienZHOU介紹的同樣基於create-react-app的方式，在Bundle組件中props入一個()=>import('path')函數

http://www.jianshu.com/p/547aa7b92d8c

 

第四種，create-react-app文檔給的react-router按需加載實現：用一個類Bundle組件的異步函數

https://serverless-stack.com/chapters/code-splitting-in-create-react-app.html

這種方式我試了下，確實能分片，但是討論里有人指出性能上不如Bundle組件，那個人好像還是Create-react-app的主要貢獻者

 

四種方式我都試過，期間。。這個過程略痛苦。。。不過結論是：第三種是目前我認為最好的，基於create-react-app，且實現最簡單。

但是較大的項目，一般我們都會eject出來自己配置webpack啦，其實影響也不大。