require.ensure()和import()的使用介绍及对比

require.ensure()

    在webpack 2的官网上写了这么一句话：

     require.ensure() is specific to webpack and superseded by import().

    所以，在webpack 2里面应该是不建议使用require.ensure()这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下。包括在webpack 1中也是可以使用。

下面是require.ensure()的语法：

require.ensure(dependencies: String[], callback: function(require), errorCallback: function(error), chunkName: String)

 

require.ensure()接受三个参数：

• 第一个参数dependencies是一个数组，代表了当前require进来的模块的一些依赖；
• 第二个参数callback就是一个回调函数。其中需要注意的是，这个回调函数有一个参数require，通过这个require就可以在回调函数内动态引入其他模块。值得注意的是，虽然这个require是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则webpack就无法静态分析的时候处理它；
• 第三个参数errorCallback比较好理解，就是处理error的回调；
• 第四个参数chunkName则是指定打包的chunk名称。

 

import()

    这里的import不同于模块引入时的import，可以理解为一个动态加载的模块的函数(function-like)，传入其中的参数就是相应的模块。例如对于原有的模块引入import react from 'react'可以写为import('react')。但是需要注意的是，import()会返回一个Promise对象。因此，可以通过如下方式使用：

    btn.addEventListener('click', e => {

        // 在这里加载chat组件相关资源 chat.js

        import('/components/chart').then(mod => {

            someOperate(mod);

        });

    });

    可以看到，使用方式非常简单，和平时我们使用的Promise并没有区别。当然，也可以再加入一些异常处理：

    btn.addEventListener('click', e => {

        import('/components/chart').then(mod => {

            someOperate(mod);

        }).catch(err ＝> {

            console.log('failed');

        });

    });

当然，由于import()会返回一个Promise对象，因此要注意一些兼容性问题。解决这个问题也不困难，可以使用一些Promise的polyfill来实现兼容。可以看到，动态import()的方式不论在语意上还是语法使用上都是比较清晰简洁的。

 

原文地址：  https://blog.csdn.net/jacktesla/article/details/80796775