webpack练手项目之easySlide（二）：代码分割

Hello,大家好。

在上一篇 webpack练手项目之easySlide（一）：初探webpack  中我们一起为大家介绍了webpack的基本用法，使用webpack对前端代码进行模块化打包。

但是乍一看webpack只是将所有资源打包到一个JS文件中而已，并没有做到真正的按需加载，这当然不是我们所想要的。

不急，今天的这一章我们就来一起继续探索webpack的另外一个功能：code split.

　　1.什么是code split

　　 英文不好，暂且将其翻译为代码分割。也就是我们根据实际业务需求将代码进行分割，然后在合适的时候在将其加载进入文档中。

　　这里举一个实际应用场景：上次我们做的图片轮播，我们为每张图片都添加一个点击事件，点击以后我们弹出一个对话框，里面介绍一些详细内容，然后可以点击关闭按钮进行关闭。

　　在这个需求中我们发现，对话框这个组件比较特殊，他是在用户点击图片以后才需要加载，如果用户不点击，那么他就没有必要加载出来了。

　　OK，很好。webpack通过code split方法将页面必须加载的资源放在bundle.js中，然后对于按需加载的资源通过ajax进行异步加载。

　　webpack通过 require.ensure 来判断是否对资源进行按需加载。

　　下面是官网的简单用例：

1 require.ensure(["module-a", "module-b"], function(require) {2   var a = require("module-a");3   // ...4 });

海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com

原标题：webpack练手项目之easySlide（二）：代码分割

关键词：web