技術標籤：前端reactwebpackjavascript

React 使用webpack 打包時，會生成一個main.js的檔案。當頁面元件增多時，main.js 也跟著變大，從而減慢頁面的載入速度。使用 compression-webpack-plugin 配合 nginx，將檔案壓縮，這種方法可行，但是載入首頁的時候，效果還是不理想。於是，想到了把main.js 拆分多個。從而減少首屏js大小，加快載入速度。

未用懶載入

Index 元件：

class Index extends React.Component {
   ...
}
export default Index;

路由引用：

import { Route,Switch } from 'react-router-dom';
import indexcomfrom '../views/index/index';
class RouterConfig extends React.Component{
   render(){
       return(
       
               <Switch>
 ...
 <Route exact path="/" component={ indexcom } />
...
               </Switch>
   
       )
   }
}
export default RouterConfig;
 

這種方式打包，會把程式碼全部打包在main.js中。

用懶載入

兩種方式可實現:

1. 使用 React 中 Suspense,lazy
2. 使用 react-loadable
   當使用路由懶載入，在元件中使用 import 引用 css 時，報錯。

```
 improt './index.css'
///  main.4d17afb4df2a6b00a18c.js?4d17afb4df2a6b00a18c:1 Uncaught (in promise) TypeError: Cannot read property 'call' of undefined
```

未解決，於是便把樣式全部放進 入口 index.js 中引用。

React 中 Suspense,lazy

1. 建立main.js ：

 ```
  class Main extends React.Component  {
    
  }
  export const MainCom = Main 
 ```

2. 建立maincom.js

  export { MainCom as default } from "./main";

3. 路由引用

 import { Route,Switch } from 'react-router-dom';
const MainCom = lazy(() => import('../views/main/maincom') );
class RouterConfig extends React.Component{
 render(){
     return(
      <Suspense fallback={ <div> 載入中  </div> }>
             <Switch>
...
<Route exact path="/" component={ MainCom } />
...
             </Switch>
 
 </Suspense>
     )
 }
}
export default RouterConfig;

react-loadable

1. login 元件：

class Loginextends React.Component {
   ...
}
export default Login;

2. 路由載入

 import { Route,Switch } from 'react-router-dom';
import Loadable from 'react-loadable';
 const logincom = Loadable({
   loader : () => import('../views/login/login'),
   loading() {
   return <div>正在載入</div>
 },
 })
class RouterConfig extends React.Component{
   render(){
       return(
        <Suspense fallback={ <div> 載入中  </div> }>
               <Switch>
 ...
 <Route exact path="/" component={ logincom } />
...
               </Switch>
   
   </Suspense>
       )
   }
}
export default RouterConfig;