基于webpack的前端工程化开发解决方案探索（二）：代码分割与图片加载

1. require.ensure

　　在上一章咱们已经知道经过require引入的资源，能够经过插件让webpack将其独立成为单独的文件，而后向HTML中自动写入路径。那对于require.ensure状况又会是怎样的状况呢？

　　咱们都知道webpack经过require.ensure来对咱们的代码进行分割，将按需加载的代码单独放在的块文件chunk中，而后在合适的时候异步加载进入文档中。

　　在webpack中引入的提取文件插件，是否影响这一功能呢？

　　

　　 一样的，此次咱们对上次的项目进行了改动，具体代码能够查看：　https://github.com/xiaoyunchen/webpack

　　

　　 首先，咱们在JS下新增了一个components文件夹，用于存放自定义的组件，而后定义了一个dialog组件（dialog的实现请参考以前的文章，本章将对本部分进行简化处理）。

　　

　　在dialog组件中咱们定义了dialog所需的HTML模板，CSS样式文件，以及入口文件Index.js（若是模块逻辑层次很复杂的话，这里还能够再新建两个关于模板和样式的子目录）

　　咱们稍微看下index.js的内容：

 1 (function(){
 2     //加载模块CSS
 3     require('./dialog.css');
 4     //加载模板
 5     var html=require('./dialog.html');
 6     
 7     module.exports=function(text){
 8         $('body').append(html);
 9         $('.dialog:last-child').html(text);
10     };
11     
12 })();

　　这里只是出于演示使用，因此实现的功能与逻辑比较简单。就是引入了所需的模板和样式文件，而后导出一个方法，改方法将会向body插入一个元素。

　　OK，咱们再来看下page目录下index.js这个入口文件的变更：

 1 //引入CSS
 2 require("../../css/lib/reset.css");
 3 require("../../css/common/global.css");
 4 require("../../css/page/index.css");
 5 
 6 //增长事件
 7 $('#btn').click(function(){
 8     require.ensure(['../components/dialog/index.js'],function(require){
 9         var Dialog=require('../components/dialog/index.js');
10         new Dialog(new Date()-0);
11     });
12 });

　　第7行，为页面的一个按钮添加了点击事件，点击后加载dialog组件，而后生成一个dialog实例。

　　

　　再来看看webpack配置中添加了什么内容：

　　

　　能够看出配置文件并无太大的变化，这里主要是：

　　18行：增长了HTML加载器，用于加载HTML模板

　　22行：引入全局jq，方便其余JS调用

　　

　　在项目根目录下运行 webpack 打包命令后，能够看到dist/js下多了1.chunk.js文件。其实看到这里你们也就放心了，webpack的确正确处理了这种按需加载的关系。

　　

　　而后运行dist/view/index.html，打开控制台观察资源加载。

　　一开始并无加载dialog组件，点击按钮后，浏览器开始异步加载dialog组件，而后生成对应的HTML.

　　

　　这里有个问题须要单独说明下，require.ensure 被webpack编译后在执行的时候会自动判断该模块已经下载，若是已经下载就不会再重复请求。

 

 

　　2. 图片加载

　　借助于url-loader这个加载器，在webpack中咱们能够比较优雅的处理图片加载的问题。所谓的比较优雅，是指：

　　1. webpack能够将所用到的图片自动拷贝到输出目录下，一样能够为其添加hash版本号

　　2. 对于比较文件比较小的图片，webpack能够将其自动转换了BASE64字符串进行存储，减小一次HTTP请求

　　接下来咱们来作下演示：

　　   

　　咱们在dialog组件目录下增长一张图片（图片大小15k左右），而后修改了dialog组件的模板，在其中引入了该张图片。这样每次咱们点击按钮的时候，浏览器都会显示这张图。

　　

　　另外咱们在 global.css进行修改，为body添加一张背景图片，因为这个图很小（1KB），因此咱们将背景图设置为重复。

1 body{
2     font: "微软雅黑";
3     background: url(../../img/mask.png) repeat scroll 0 0;
4 }

　　最后，咱们在webpack配置文件中，为图片引入url-loader加载器，同时为其指定存放路径和文件名：

1 module: {
2         loaders: [    //加载器
3             {test: /\.css$/, loader:ExtractTextPlugin.extract("style", "css") },
4             {test: /\.html$/, loader: "html" },
5             {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'}
6         ]
7     }

　　生成的图片存放在dist/img下，而后为了混淆，咱们将图片文件名设置为其hash值。

　　同时咱们配置了limit参数，当图片大小小于这个值的时候，webpack都将会转换为base64字符串进行存储。

 

　　而后在项目根目录下运行 webpack 命令进行打包，而后运行生成index.html文件：

　　

　　点击ADD按钮后浏览器才发起异步请求，加载了dialog组件以及咱们所引入的图片资源，同时图片名称已经被设置为hash值。

　　再来看看样式中引入的图片：

　　

　　　　能够看到这个背景图已经转换成BASE64字符串写入css文件中，因此这里就减小了一次图片请求。这是一种比较经常使用的优化页面性能的方式。

　　

　　　　上面说到webpack的这种处理方式是一种比较优雅的处理方式，那又有哪些地方不够完善呢？

　　　　1. 上面写入模板中的图片webpack能够帮咱们处理，可是src/view目录下的用于生成最终HTML的模板，webpack并不会对其中所引入的图片进行提取处理，致使图片路径不对。

　　　　2. 这里只是对图片进行了提取，其实并未对图片进行任何优化处理，好比合并小图标，限制图片质量避免图片过大等。

 

转博客园小侠