美高梅开户-美高梅官方网站开户

您的位置:美高梅开户 > 美高梅官方网站开户 > router中结合webpack实现按需加载实例,按需加载

router中结合webpack实现按需加载实例,按需加载

发布时间:2019-08-13 13:09编辑:美高梅官方网站开户浏览(74)

    美高梅官方网站开户 ,app2

    美高梅官方网站开户 1

    只要想要动态加载出es6代码组件,直接require三个es6风格的组件是十三分的,因为相似的语言编写翻译工具(如babel),不辅助间接require二个es6风格的机件。

    (4)总结:

    先是介绍下动态加载函数:

    首页时候,加载了examine.js和nav.js:

    上述正是本文的全体内容,希望对大家的学习抱有帮忙,也冀望大家多多支持脚本之家。

    3、如果在路由页面使用了按需加载(require.ensure)加载路由级组件的点子,那么在其他省方(满含本页面)就不要再import了,否则不会卷入生成chunk文件。简单的讲,必要按需加载的路由级组件必须在路由页面实行加载。

    您大概感兴趣的稿子:

    • 详解react-router怎样达成按需加载
    • React-router中结合webpack实现按需加载实例
    • React-router 4 按需加载的贯彻方式及原理详解
    • react-router完成按需加载
    • react 达成页面代码分割、按需加载的方式

    上述便是本文的全部内容,希望对我们的学习抱有扶助,也希望咱们多多辅助脚本之家。

    import React, {Component} from 'react';
    
    export default class Father extends Component {
      constructor (props)=>{
        super();
        this.state = {
          currentComponent:null
        }
      }
    
      doSomething = () => {
        require.ensure(['./app2'], (require) => {
          const Comp = require('./app2');
          this.setState({
            currentComponent:<Comp />
          })
        })
      }
    
      render () {
        return (
          <div>
    
              点击后,按需加载模块~
    
            {this.state.currentComponent}
          </div>
        )
      }
    }
    

    切换路由时,例如从首页切换成了货色管理,那样除了加载examine.js外,多加载了admin.js:

    require.ensure([], (require)=>{
      let A = require('./a.js').default;
    })
    

    美高梅官方网站开户 2

    那么有种方法能够化解:在es6办法书写的零件尾部增添一句:module.exports = YouclassName;

    2、假让你的组件是采纳es5的module.exports导出的话,那么只要求require(‘components/Index')就可以。而只要你的机件是行使es6的export default导出的话,那么需求丰硕default!举个例子:require(‘components/Index').default

    因为在require.ensure()中运用了require()引进模块,所以组件后务必用module.exports导出组件;

    require.ensure(["module-a", "module-b"], function() {
     var a = require("module-a");
     // ...
    });
    
    import React,{Component} from 'react';
    export default class Hello extends Component {
      render () {
        return (
          <div>你好,祝你幸福,再见~</div>
        )
      }
    }
    
    
    module.exports= Hello;
    

    1、require(‘components/Index').default中require方法的参数不可能选拔变量,只可以采纳字符串!

    本条require.ensure保障了模块的异步调用,当callback回调中调用了三个模块的时候,能够兑现按需加载。

    (2)通过getComponents等3个法子重新配置路由

    3.注意事项:

     output: {
        path: __dirname   '/dist/js/',
        publicPath:'/js/',
        filename: '[name].js',
        chunkFilename: '[name].[chunkhash:5].chunk.js'
      },
    

    本文由美高梅开户发布于美高梅官方网站开户,转载请注明出处:router中结合webpack实现按需加载实例,按需加载

    关键词: 美高梅开户