在react-router4中进行代码拆分的方法(基于webpack)

　　

<强>前言

　　

随着前端项目的不断扩大,一个原本简单的网页应用所引用的js文件可能变得越来越庞大。尤其在近期流行的单页面应用中、越来越依赖一些打包工具(例如webpack),通过这些打包工具将需要处理,相互依赖的模块直接打包成一个单独的包文件,在页面第一次载入时,就会将所有的js全部载入。但是,往往有许多的场景,我们并不需要在一次性将单页应用的全部依赖都载下来,例如:我们现在有一个带有权限的“订单后台管理“单页应用,普通管理员只能进入“订单管理”部分,而超级用户则可以进行”系统管理”,或者,我们有一个庞大的单页应用,用户在第一次打开页面时,需要等待较长时间加载无关资源。这些时候,我们就可以考虑进行一定的代码拆分(代码分割)。

　　

<>强实现方式

　　

<强>简单的按需加载

　　

代码拆分的核心目的,就是实现资源的按需加载。考虑这么一个场景,在我们的网站中,右下角有一个类似聊天框的组件,当我们点击圆形按钮时,页面展示聊天组件。

　　 　　 　　btn。addEventListener(“点击”,函数(e) {//在这里加载聊天组件相关资源chat.js 　　}); 　　 　　

从这个例子中我们可以看的出,通过将加载chat.js的操作绑定在btn点击事件上,可以实现点击聊天按钮后聊天组件的按需加载。而要动态加载js资源的方式也非常简单(方式类似熟悉的jsonp)。通过动态在页面中添加& lt; scrpt>标签,并将src属性指向该资源即可。

　　 　　 　　btn。addEventListener(“点击”,函数(e) {//在这里加载聊天组件相关资源chat.js 　　var避署=document.createElement(“脚本”); 　　ele.setAttribute (“src”、“静态/chat.js”); 　　document.getElementsByTagName(头)[0].appendChild(避署); 　　}）; 　　之前 　　 　　

代码拆分就是为了要实现按需加载所做的工作。想象一下,我们使用打包工具,将所有的js全部打包到了bundle.js这个文件,这种情况下是没有办法做到上面所述的按需加载的,因此,我们需要讲按需加载的代码在打包的过程中拆分出来,这就是代码拆分。那么,对于这些资源,我们需要手动拆分么?当然不是,还是要借助打包工具。下面就来介绍webpack中的代码拆分。

　　

<强>代码拆分

　　

这里回到应用场景,介绍如何在webpack中进行代码拆分。在webpack有多种方式来实现构建是的代码拆分。

　　

<强> import()

　　

这里的进口不同于模块引入时的导入,可以理解为一个动态加载的模块的函数(函数),传入其中的参数就是相应的模块,例如对于原有的模块引入从“反应”可导入反应以写为进口(“反应”)。但是需要注意的是,进口()会返回一个承诺对象,因此,可以通过如下方式使用:

　　 　　 　　btn。addEventListener(“点击”,e=比;{//在这里加载聊天组件相关资源chat.js 　　进口('/组件/图表”)。然后(mod=比;{ 　　someOperate (mod); 　　}）; 　　}）; 　　之前 　　 　　

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

　　 　　 　　btn。addEventListener(“点击”,e=比;{ 　　进口('/组件/图表”)。然后(mod=比;{ 　　someOperate (mod); 　　})。抓住(呃=比;{ 　　console.log(“失败”); 　　}）; 　　}）; 　　之前 　　 　　

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

　　

<强> require.ensure()

　　

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

　　
　　

require.ensure()是特定于webpack和取代进口()。
　　

　　 　　

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

　　

代码如下:
　　要求。确保(依赖关系:String[],回调:功能(需要),errorCallback:函数(错误),chunkName:字符串)
　　
　　

　　

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

　　
    　　<李>第一个参数依赖性是一个数组,代表了当前需要进来的模块的一些依赖;李 　　<李>第二个参数回调就是一个回调函数。其中需要注意的是,这个回调函数有一个参数要求,通过这个要求就可以在回调函数内动态引入其他模块。值得注意的是,虽然这个要求是回调函数的参数,理论上可以换其他名称,但是实际上是不能换的,否则webpack就无法静态分析的时候处理它,李

    在react-router4中进行代码拆分的方法(基于webpack)