zoukankan      html  css  js  c++  java
  • React动态import()

    React动态import()

    react-router@v4代码分离,推荐的import()。这里分享webpack配置和使用方法。

    首先安装两个必须的包

    cnpm i react-loadable babel-plugin-syntax-dynamic-import -D
    

    react-loadable是官方推荐的动态加载组件,babel-plugin-syntax-dynamic-import是babel支持webpack的import()插件。
    配置方法:在.babelrc

    {
      "presets": [
        "react"
      ],
      "plugins": [
        "syntax-dynamic-import"
      ]
    }
    

    上面babel-plugin前缀是可以省略的。

    上面配好后,如果你配了eslint还是会报错的,如果eslint配置不对。报import() undefined
    要保证eslint不报import()错误需要
    cnpm i babel-eslint -D

    然后在.eslintrc加上配置

    module.exports = {
      //...若干配置
      
      parser: "babel-eslint"
    }
    

    使用babel-eslint解析才可以识别import()

    然后就是使用了_

    这里我把官方的demo封装成了一个文件loadable.jsx

    import React from 'react'
    import Loadable from 'react-loadable'
    
    const Loading = () => {
      return <div>loading...</div>
    }
    
    export default (Loader) => {
      const LoadableComponent = Loadable({
        loader: Loader,
        loading: Loading
      })
    
      return class LoadableHOC extends React.Component {
        render () {
          return <LoadableComponent></LoadableComponent>
        }
      }
    }
    

    随便写一个需要动态导入的组件Import.jsx

    import React from 'react'
    
    class Import extends React.Component {
      render () {
        return <div>import...</div>
      }
    }
    
    export default Import
    
    

    包含的动态导入的容器组件Test.jsx

    import React from 'react'
    import loadable from '@/utils/loadable'
    
    const Import = loadable(() => import('@/components/Import'))
    
    class Test extends React.Component {
      render () {
        return (<div>
          <Import></Import>
        </div>)
      }
    }
    
    export default Test
    
    

    然后在main.jsx

    import React from 'react'
    import ReactDom from 'react-dom'
    import Test from '@/components/Test'
    
    ReactDom.render(<Test />, document.getElementById('app'))
    
    
  • 相关阅读:
    Blend操作入门: 别站在门外偷看,快进来吧!
    Egyee,这个世界很美丽
    在Windows Azure中使用自己的域名
    Windows Azure服务购买,收费,使用注意事项及学习资料推荐
    Silverlight怎样加载xap中的各个程序集
    WCF RIA Service随想
    Silverlight布局,也许不止这么多(附照片墙示例及源码)
    An introduction to variable and feature selection
    Compressed Learning
    Robust PCA (摘抄)
  • 原文地址:https://www.cnblogs.com/lantuoxie/p/9104014.html
Copyright © 2011-2022 走看看