iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 28
0
自我挑戰組

請你當我的好朋友吧!ReactJS!系列 第 28

【DAY 28】用react-loadable與react-router做code splitting吧

【前言】
  第28天了.......
【正文】
  雖著專案越來越大,我們要撰寫的js檔也越來越多,但最後我們都會在App.js(或是Root.js)去import各式component的js檔案,然而如果我們透過打包工具(Webpack)幫我們把這些檔案編譯的時候,所有js都會被打包成一支bundle.js檔案。也就是說,每當我們開啟網頁的時候,只會引入這支bundle.js,那如果這支檔案越來越大的時候,豈不是Loading會很慢嗎?
  因此,我們希望的是,我們希望我們程式碼能夠被拆分,只要在對的時間及對的地方在執行就好,也就是code splitting,這樣就可以提高網頁讀取速度,間接地也會給予使用者更好的使用體驗。
  那要怎麼達到這個效果呢?我們可以利用react-loadable這個套件及搭配react-router來幫我們達到這樣的功能。

react-loadable is a higher-order component for loading components with dynamic imports. It handles all sorts of edge cases automatically and makes code splitting simple!

  那要怎麼使用呢?首先要先安裝react-loadable

npm install --save react-loadable

  再來把我們的App.js改成下面:

import React from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
// import react-loadable
import Loadable from 'react-loadable';

import Footer from './Footer';

// 撰寫如果網頁載入較慢時要render的component
const Loading = () => {
	return <div>Loading......</div>
};

// 用react-loader包裝的Home Component
const Home = Loadable({
    // 要load的component,用import的方式插入componenr
	loader() {
		return import('./Home');
	},
    // 如果loading較慢時,要render的component
	loading: Loading,
});

const About = Loadable({
	loader() {
		return import('./About');
	},
	loading: Loading,
});

const Contact = Loadable({
	loader() {
		return import('./Contact');
	},
	loading: Loading,
});


class App extends React.Component {
	render() {
		return(
			<Router>
				<div>
					<Route path="/" exact component={Home} />
					<Route path="/About" component={About} />
					<Route path="/Contact" component={Contact} />
					<Footer />
				</div>
			</Router>
		);
	}
}

export default App;

  這樣的話就可以達到在哪張頁面就只要render 那支component部分的程式碼的功能了。
圖片


上一篇
【DAY 27】React-router,其它很有用的組件(下)
下一篇
【DAY 29】react-router,很高興認識你!
系列文
請你當我的好朋友吧!ReactJS!30

尚未有邦友留言

立即登入留言