webpack如何實(shí)現(xiàn)緩存優(yōu)化、合并、懶加載

這篇文章主要介紹webpack如何實(shí)現(xiàn)緩存優(yōu)化、合并、懶加載，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

除了的webpack基本配置，還可以進(jìn)一步添加配置，優(yōu)化合并文件，加快編譯速度。下面是生產(chǎn)環(huán)境配置文件webpack.production.js，與wenbpack.config.js相比其不需要一些dev-tools,dev-server和jshint校驗(yàn)等，將與開(kāi)發(fā)相關(guān)的東西刪掉。

/*生成環(huán)境配置文件：不需要一些dev-tools,dev-server和jshint校驗(yàn)等。和開(kāi)發(fā)有關(guān)的東西刪掉*/
var webpack = require('webpack');
var path = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact = path.resolve(node_modules, 'react/dist/react.min.js');
var pathToReactDOM = path.resolve(node_modules, 'react-dom/dist/react-dom.min.js');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
//具體作用及缺點(diǎn)見(jiàn)plugins中的描述
//var WebpackMd5Hash = require('webpack-md5-hash');
// 該插件是對(duì)“webpack-md5-hash”的改進(jìn)：在主文件中獲取到各異步模塊的hash值，然后將這些hash值與主文件的代碼內(nèi)容一同作為計(jì)算hash的參數(shù)，這樣就能保證主文件的hash值會(huì)跟隨異步模塊的修改而修改。
var WebpackSplitHash = require('webpack-split-hash');

var config = {
  entry:{
    app:path.resolve(__dirname, 'src/js/entry.js'),
    mobile: path.resolve(__dirname, 'src/js/mobile.js'),
    //添加要打包在vendors.js里面的庫(kù)
    vendors:['react','react-dom']
  },
  resolve:{
    alias: {
      'react.js': pathToReact, //alias:別名,
      'react-dom.js': pathToReactDOM
    },
    fallback: path.join(__dirname, "node_modules")
  },
  resolveLoader: { 
    fallback: path.join(__dirname, "node_modules") 
  },
  output:{
    path:path.resolve(__dirname, 'dist'),
    publicPath:'../',//生成的html里的引用路徑用 publicPath
    //以文件內(nèi)容的MD5生成Hash名稱的script來(lái)防止緩存
    filename: 'js/[name].[chunkhash:8].js',
    //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
    chunkFilename: 'js/[name].[chunkhash:8].js'
  },
  module:{
    loaders:[{
      test: /\.jsx?$/,
      //這里(node_modules文件夾)再也不需通過(guò)任何第三方來(lái)加載
      exclude:path.resolve(__dirname, 'node_modules'),
      loader: 'babel',
      query:{
        presets:['es2015', 'react']
      }
    },
    {
      test:/\.css$/,
      //loader:'style!css'
      loader: ExtractTextPlugin.extract("style", "css")
    },
    {
      test:/\.scss$/,
      loader:'style!css!sass'
    },
    //url-loader:圖片、字體圖標(biāo)加載器，是對(duì)file-loader的上層封裝,支持base64編碼。傳入的size（也有的寫(xiě)limit) 參數(shù)是告訴它圖片如果不大于 25KB 的話要自動(dòng)在它從屬的 css 文件中轉(zhuǎn)成 BASE64 字符串。
    {
      test: /\.(png|jpg|jpeg|gif|svg|woff|woff2|ttf|eot)$/,
      loader: 'url?limit=25000&name=[name].[ext]'
    }]
  },
  plugins:[
    //提取公共代碼的插件，用于提取多個(gè)入口文件的公共腳本部分，然后生成一個(gè)vendors.js。注意HTML代碼中要加載這個(gè)公共文件
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendors',
      filename: 'js/vendors.js'
    }),
    //在文件開(kāi)頭插入banner
    new webpack.BannerPlugin("The file is creted by yangmin.--"+ new Date()),
    //壓縮js文件
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    }),
    /*插件：?jiǎn)为?dú)使用style標(biāo)簽加載css文件.contenthash代表的是文本文件內(nèi)容的hash值，也就是只有style文件的hash值*/
    new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設(shè)置其路徑(路徑相對(duì)于path)
    /*插件：動(dòng)態(tài)生成html，在webpack完成前端資源打包以后，自動(dòng)將打包后的資源路徑和版本號(hào)寫(xiě)入HTML中，達(dá)到自動(dòng)化的效果。*/
    new HtmlWebpackPlugin({
      filename:'view/index.html',  //生成的html存放路徑，相對(duì)于 path
      template:'src/view/index.html',  //html模板路徑
      inject:true,  //允許插件修改哪些內(nèi)容，true/'head'/'body'/false,
      chunks:['vendors','app'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所有文件
      hash:false,  //為靜態(tài)資源生成hash值
      minify:{  //壓縮HTML文件
        removeComments:false,  //移除HTML中的注釋
        collapseWhitespace:false  //刪除空白符與換行符
      }    
    }),
    new HtmlWebpackPlugin({
      filename:'view/mobile.html',  //生成的html存放路徑，相對(duì)于 path
      template:'src/view/mobile.html',  //html模板路徑
      inject:true,  //允許插件修改哪些內(nèi)容，true/'head'/'body'/false,
      chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所欲文件
      hash:false,  //為靜態(tài)資源生成hash值
      minify:{  //壓縮HTML文件
        removeComments:false,  //移除HTML中的注釋
        collapseWhitespace:false  //刪除空白符與換行符
      }
    }),
    /*作用：生成具有獨(dú)立hash值的css和js文件，即css和js文件hash值解耦.
     *缺點(diǎn)：webpack-md5-hash插件對(duì)chunk-hash鉤子進(jìn)行捕獲并重新計(jì)算chunkhash，它的計(jì)算方法是只計(jì)算模塊本身的當(dāng)前內(nèi)容（包括同步模塊）。這種計(jì)算方式把異步模塊的內(nèi)容忽略掉了，會(huì)造成一個(gè)問(wèn)題：異步模塊的修改并未影響主文件的hash值。
     */
    //new WebpackMd5Hash()
    new WebpackSplitHash()
  ]
}
 module.exports = config;

一、在開(kāi)發(fā)環(huán)境中使用壓縮文件

例如ReactJS項(xiàng)目中為了不讓 Webpack 去遍歷 React JS 及其所有依賴，你可以在webpack.config.js中重寫(xiě)它的行為。

config.alias: 每當(dāng) "react" 在代碼中被引入，它會(huì)使用壓縮后的 React JS 文件。

noParse: 阻止Webpack 去解析那個(gè)壓縮后的文件。

當(dāng)加載多個(gè)壓縮文件時(shí)，下述方法更優(yōu)雅簡(jiǎn)便,webpack.production.js:

var webpack = require("webpack");
...
var HtmlWebpackPlugin = require('html-webpack-plugin');

var deps = [
  'react/dist/react.min.js',
  'react-dom/dist/react-dom.min.js'
];
var config = {
  ...
  resolve:{
    alias:{},
    fallback:path.join(__dirname, "node_modules")
  },
  ...
  module:{
     ...
     noParse:[]  
   }  
}
/*當(dāng)加載多個(gè)壓縮文件時(shí)，下述方法更優(yōu)雅簡(jiǎn)便*/
deps.forEach(function(dep){  
  var depPath = path.resolve(node_modules, dep);
  //path.dep是路徑分隔符。
  config.resolve.alias[dep.split(path.dep)[0]] = depPath;  
  config.module.noParse.push(depPath);

});

module.exports = config;

二、分離應(yīng)用和第三方文件

當(dāng)你的應(yīng)用依賴其他庫(kù)尤其是像 React JS 這種大型庫(kù)的時(shí)候，需要考慮把這些依賴分離出去，這樣就能夠讓用戶在你更新應(yīng)用之后不需要再次下載第三方文件。上述配置文件中的entry里添加了第三方包vendors，其值為要分離打包的文件。運(yùn)行配置后會(huì)在dist/js下生成三個(gè)獨(dú)立文件：app.js、mobile.js、vendors.js。注意在頁(yè)面中藥引入vendors.js

<script src="../dist/vendors.js"></script>
<script src="../dist/app.js"></script>

三、多重入口

當(dāng)應(yīng)用有多個(gè)頁(yè)面， 頁(yè)面之間雖然有共享代碼，但是不想在頁(yè)面中加載所有代碼時(shí)可以定義多重入口。例如配置文件中的app.js針對(duì)pc端頁(yè)面，mobile.js僅針對(duì)移動(dòng)端頁(yè)面，output的filename：'js/[name].[chunkhash:8].js',采用了文件名變量，這樣在dist/js中可生成與源文件同名的文件。

四、優(yōu)化緩存及懶加載

在生產(chǎn)環(huán)境中，將輸出文件名添加hash值，目的是在文件更改時(shí)強(qiáng)制客戶端重新加載這個(gè)文件，而未改變的文件繼續(xù)使用緩存文件。常用的有hash和chunkhash。配置文件中的[chunkhash:8]即截取8位chunkhash值?！　?/p>

webpack的編譯理念：webpack將style視為js的一部分，所以在計(jì)算chunkhash時(shí)，會(huì)把所有的js代碼和style代碼混合在一起計(jì)算。比如entry.js引用了main.css：

import 'main.css'; 
alert('I am main.js');

webpack計(jì)算chunkhash時(shí)，以entry.js文件為編譯入口，整個(gè)chunk的內(nèi)容會(huì)將main.css的內(nèi)容也計(jì)算在內(nèi)。所以，不論是修改了js代碼還是css代碼，整個(gè)chunk的內(nèi)容都改變了，計(jì)算所得的chunkhash隨之改變。但理想情況下是想css或js內(nèi)容改變時(shí)僅影響自身文件的chunkhash，這樣客戶端只需更新一部分文件。解決此問(wèn)題首先要將css單獨(dú)編譯輸出文件，因?yàn)檎Ｇ闆r下webpack會(huì)把js文件中引入的css文件編譯輸出到html頁(yè)面的<style></style>標(biāo)簽中。

1.使用extract-text-webpack-plugin單獨(dú)編譯輸出css文件

安裝extract-text-webpack-plugin，

npm install extract-text-webpack-plugin --save-dev

然后在配置文件中引入插件，

//webpack.production.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');

該插件除了chunkhash還提供了另外一種hash值contenthash。顧名思義，contenthash代表的是文本文件內(nèi)容的hash值，也就是只有style文件的hash值。此hash是可解決上述問(wèn)題的關(guān)鍵所在。上述配置文件使用了contenthash：

//webpack.production.config.js
new ExtractTextPlugin("css/[name].[contenthash:8].css"),//設(shè)置其路徑(路徑相對(duì)于path)

2.使用使用webpack-md5-hash解耦css和js文件hash值

再考慮以下情況，只修改了main.css文件，未修改entry.js文件，編譯輸出的js文件hash是否改變？答案是改變了，因?yàn)樯衔奶岬降膚ebpack的編譯理念，webpack將style視為js的一部分，所以在計(jì)算chunkhash時(shí)，會(huì)把所有的js代碼和style代碼混合在一起計(jì)算。解決辦法是使用webpack-md5-hash插件：

//webpack.production.config.js

var WebpackMd5Hash = require('webpack-md5-hash');
...
new WebpackMd5Hash();

它的作用是生成具有獨(dú)立hash值的css和js文件，即css和js文件hash值解耦。webpack-md5-hash插件對(duì)chunk-hash鉤子進(jìn)行捕獲并重新計(jì)算chunkhash，它的計(jì)算方法是只計(jì)算模塊本身的當(dāng)前內(nèi)容（包括同步模塊）。

3.主文件使用hash代替chunkhash解決異步加載模塊改變時(shí)主文件hash不改變

假如文件中引入了異步模塊，異步模塊修改后會(huì)影響編譯輸出的js文件的chunkhash嗎？現(xiàn)在入口文件中引入異步模塊a.js，a.js文件又異步引入b.js，b.js同步引入c模塊

//entry.js

'use strict';

import './saveCarInfo.js';

window.onload = function(){//懶加載
  require.ensure(['./a.js'],function(require){
    var moduleA = require('./a.js');
  },'a');
};

//a.js

'use strict'

console.log("a");

setTimeout(function(){
  require.ensure([],function(require){
    require('./b.js');
  },'b');
},10000);

module.exports = "moduleA";

//b.js
import fn_c from './c.js';

console.log('b');
module.exports = 'moduleB';

//c.js

console.log("c");
module.exports = "moduleC";

運(yùn)行npm run deploy,編譯輸出如下,我們看到除了入口文件、css文件、html文件被輸出外，異步加載的模塊a.js、b.js也被當(dāng)做獨(dú)立模塊輸出。

此時(shí)修改a.js文件中的代碼，經(jīng)編譯后，a.[chunkhash].js的chunkhash會(huì)改變，而生成的主文件app.[chunkhash].js的chunkhash值并沒(méi)有改變。原因是webpack-md5-hash的這種計(jì)算方式把異步模塊的內(nèi)容忽略掉了，這會(huì)造成一個(gè)問(wèn)題：異步模塊的修改并未影響主文件的chunkhash值。解決辦法是將輸出的主文件采用[hash]，而非[chunkhash]

output:{
  path:path.resolve(__dirname, 'dist'),
  publicPath:'../',//生成的html里的引用路徑用 publicPath
  filename: 'js/[name].[hash:8].js',
  //異步加載的模塊是要以文件形式加載，生成的文件名是以chunkFilename配置的
  chunkFilename: 'js/[name].[chunkhash:8].js'
},

這種做法也存在缺陷，如果項(xiàng)目中存在不止一個(gè)主js文件，修改任意js代碼會(huì)影響所有最終主文件的[hash]值。例如上面的項(xiàng)目配置中會(huì)生成兩個(gè)帶[hash]的主文件：app.[hash].js, mobile.[hash].js。無(wú)論是修改entry.js代碼還是異步模塊a.js，或b.js的代碼，app.[hash].js和mobile.[hash].js的[hash]都會(huì)改變。

補(bǔ)充：npm提供了webpack-split-hash插件代替webpack-md5-hash，該插件可以獲取到各異步模塊的hash值，然后將這些hash值與主文件的代碼內(nèi)容一同作為計(jì)算hash的參數(shù)，這樣就能保證主文件的hash值會(huì)跟隨異步模塊的修改而修改。但我驗(yàn)證后沒(méi)有實(shí)現(xiàn)。。。

4.使用html-webpack-plugin動(dòng)態(tài)生成html

配置文件中的輸出文件都帶了[chunkhash]作為版本號(hào)，在style或js文件改變時(shí)，其值都會(huì)隨之改變。利用html-webpack-plugin在webpack完成前端資源打包以后，自動(dòng)將打包后的資源路徑和版本號(hào)寫(xiě)入HTML中，達(dá)到自動(dòng)化的效果。

//webpack.production.config.js

var HtmlWebpackPlugin = require('html-webpack-plugin');
...
var config = {
...
plugins:[
... 
  new HtmlWebpackPlugin({
    filename:'view/index.html',  //生成的html存放路徑，相對(duì)于 path
    template:'src/view/index.html',  //html模板路徑
    inject:true,  //允許插件修改哪些內(nèi)容，true/'head'/'body'/false,
    chunks:['vendors','app'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所有文件
    hash:false,  //為靜態(tài)資源生成hash值
    minify:{  //壓縮HTML文件
      removeComments:false,  //移除HTML中的注釋
      collapseWhitespace:false  //刪除空白符與換行符
     }    
  }),
  new HtmlWebpackPlugin({
    filename:'view/mobile.html',  //生成的html存放路徑，相對(duì)于 path
    template:'src/view/mobile.html',  //html模板路徑
    inject:true,  //允許插件修改哪些內(nèi)容，true/'head'/'body'/false,
    chunks:['vendors','mobile'],//加載指定模塊中的文件，否則頁(yè)面會(huì)加載所有文件
    hash:false,  //為靜態(tài)資源生成hash值
    minify:{  //壓縮HTML文件
      removeComments:false,  //移除HTML中的注釋
      collapseWhitespace:false  //刪除空白符與換行符
     }    
  })
]}

以上是“webpack如何實(shí)現(xiàn)緩存優(yōu)化、合并、懶加載”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對(duì)大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！