react-loadable 進行代碼分割的基本使用

由上篇文章咱們能夠知道，個人項目，打包後的 js 是 7M 的，首屏就加載 7M 的文件雖然沒什麼特別大的缺點，但總不是最優的解決辦法

所以咱們用到了 react-router4 的 react-loadable ,以路由的方式進行代碼分割。

使用方法很簡單：

　　一、首先須要一個 loading 組建，用於加載前的展現

　　二、而後修改組建的加載入口

　　

　　

基本的操做就如上圖所示。

由上面文章咱們能夠知道，個人項目打包到同一個 js 裏面，有 7M 的大小

而後經過 coding split 以後呢，看看咱們的文件吧：

這樣帶來的壞處就是，可能個人不一樣組件引入了相同的代碼，會致使屢次打包。

原理➡️