本文主要是介绍require.ensure()和import() 使用区分，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
require.ensure()
在webpack 2的官网上写了这么一句话：
require.ensure（）特定于的的的WebPack并由进口（）取代。
所以，在webpack 2里面应该是不建议使用require.ensure（）这个方法的。但是目前该方法仍然有效，所以可以简单介绍一下。包括在webpack 1中也是可以使用。下面是require.ensure（）的语法：
require.ensure（dependencies：String []，callback：function（require），errorCallback：function（error），chunkName：String）
require.ensure（）接受三个参数：
第一个参数的依赖关系是一个数组，代表了当前需要进来的模块的一些依赖;
。第二个参数回调就是一个回调函数其中需要注意的是，这个回调函数有一个参数要求，通过这个要求就可以在回调函数内动态引入其他模块值得注意的是，虽然这个要求是回调函数的参数，理论上可以换其他名称，但是实际上是不能换的，否则的的的的WebPack就无法静态分析的时候处理它;
第三个参数errorCallback比较好理解，就是处理错误的回调;
第四个参数chunkName则是指定打包的组块名称。
import()
这个的进口不同于模块引入时的导入，可以理解为一个动态加载的模块的函数（函数等），传入其中的参数就是相应的模块。例如对于原有的模块引入从 '反应' 导入写为进口（'反应'）但是需要注意的是，进口（）会返回一个无极对象因此，可以通过如下方式使用：
btn.addEventListener（'click'，e => {
//在这里加载聊天组件相关资源chat.js
import（'/ components / chart'）。then（mod => {
someOperate（MOD）;
}）;
}）;
可以看到，使用方式非常简单，和平时我们使用的承诺并没有区别当然，也可以再加入一些异常处理：
btn.addEventListener（'click'，e => {
import（'/ components / chart'）。then（mod => {
someOperate（MOD）;
}）。catch（err => {
的的console.log（'失败'）;
}）;
}）;
当然，由于进口（）会返回一个承诺对象，因此要注意一些兼容性问题。解决这个问题也不困难，可以使用一些承诺的填充工具来实现兼容。可以看到，动态导入（）的方式不论在语意上还是语法使用上都是比较清晰简洁的。
VUE使用实例
例：require.ensure()实现 const notFound = r => require.ensure([], () => r(require('@views/common/404')), 'index')
const login = r => require.ensure([], () => r(require('@views/common/login')), 'index')
const register = r => require.ensure([], () => r(require('@views/common/register')), 'index')
const main = r => require.ensure([], () => r(require('@views/main')), 'index')
const myWorks = r => require.ensure([], () => r(require('@views/my/index')), 'my')
const myAccountSetting = r => require.ensure([], () => r(require('@views/my/account-setting')), 'my')
const makeIndex = r => require.ensure([], () => r(require('@views/make/index')), 'make')例：import()实现const notFound = () => import(/* webpackChunkName: "index" */ '@views/common/404')
const login = () => import(/* webpackChunkName: "index" */ '@views/common/login')
const register = () => import(/* webpackChunkName: "index" */ '@views/common/register')
const main = () => import(/* webpackChunkName: "index" */ '@views/main')
const myWorks = () => import(/* webpackChunkName: "my" */ '@views/my/index')
const myAccountSetting = () => import(/* webpackChunkName: "my" */ '@views/my/account-setting')
const makeIndex = () => import(/* webpackChunkName: "make" */ '@views/make/index')原文链接https://blog.csdn.net/jacktesla/article/details/80796775
Webpack + react-router按需加载链接：https://blog.csdn.net/qq_24581629/article/details/75048860
这篇关于require.ensure()和import() 使用区分的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
