「reactjs性能優化」react-loadable 異步路由加載

優勢

每個路由使用不同的chunk，沒必要一次加載所以js

配置插件 react-loadable

yarn add react-loadable -S

封裝高階組件

import React from 'react'import Loadable from 'react-loadable'import { isDevEnv } from '@/utils/env'const Loading = (props) => {  const { error } = props  const isDev = isDevEnv  if (error && isDev) {    return (      
        
{error.stack ? error.stack : ''}
      
    )  }  return 
}const loadableComponent = (loader, render) => {  const config = {    loader,    loading: Loading,    delay: 1000,  }  if (render) {    config.render = render  }  return Loadable(config)}export default loadableComponent

使用方式

注意路由引入的方式使用 import的方式引入 const Stark = () => import('views/Stark') 使用 la高階組件包含 路由組件 component={la(Stark)}

import la from './loadableComponent'const Stark = () => import('views/Stark')    

打包後會產生很多 chunk

2019-07-08-15-32-59

每個路由使用不同的chunk，沒必要一次加載所以js

2019-07-08-15-38-45

2019-07-08-15-39-02

2019-07-08-15-39-23

閱讀更多 西樹先森 的文章

關鍵字: 異步 2019你為誰驕傲 加載