基於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. 這裏只是對圖片進行了提取，其實並未對圖片進行任何優化處理，好比合並小圖標，限制圖片質量避免圖片過大等。

 

轉博客園小俠