只有不斷學習和成長，才能適應這個快速變化的世界。 1. 懶載入 1.1 React 懶載入 React 中懶載入 Lazy 與 Suspense 需要搭配使用。 React.lazy 定義： React.1azy 函數能讓你像渲染常規組件一樣處理動態引入的組件。其實就是懶載入。 為什麼代碼要分割？ ...
只有不斷學習和成長，才能適應這個快速變化的世界。
1. 懶載入
1.1 React 懶載入
React 中懶載入 Lazy 與 Suspense 需要搭配使用。
React.lazy 定義：
React.1azy 函數能讓你像渲染常規組件一樣處理動態引入的組件。其實就是懶載入。
為什麼代碼要分割？
當你的程式越來越大，代碼量越來越多。一個頁面上堆積了很多功能，也許有些功能很可能都用不到，但是一樣下載載入到頁面上，所以這裡面肯定有優化空間。就如圖片懶載入的理論。
實現原理？
當 webpack 解析到該語法時，它會自動地開始進行代碼分割（Code Splitting），分割成一個文件，當使用到這個文件的時候這段代碼才會被非同步載入。
解決方案？
在 React.1azy 和常用的三方包 react-1oadab1e（路由懶載入），都是使用了這個原理，然後配合 webpack 進行代碼打包拆分達到非同步載入，這樣首屏渲染的速度將大大的提高。由於 React.1azy 不支持服務端渲染，所以這時候 react-1oadable 就是不錯的選擇。
1.2 Lazy 和 Suspense 使用
// 當使用到的時候才進行導入
const NewComponent = React.lazy(()=>import('./component/NewComponent'))
<Suspense fallback={<div>正在載入中</div>}>
<NewComponent></NewComponent>
<Suspense>
