webpack學(xué)習(xí)筆記—優(yōu)化緩存、合并肮帐、懶加載等

進(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(也有的寫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)寫入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中重寫它的行為恨胚。

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并炮,二者的區(qū)別請(qǐng)參考hash與chunkhash默刚。配置文件中的[chunkhash:8]即截取8位chunkhash值。  
  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)檎G闆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)寫入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    //刪除空白符與換行符
         }        
    })
]}
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末砾嫉,一起剝皮案震驚了整個(gè)濱河市幼苛,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌焰枢,老刑警劉巖蚓峦,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異济锄,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)霍转,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門荐绝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人避消,你說(shuō)我怎么就攤上這事低滩≌偌校” “怎么了?”我有些...
    開(kāi)封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵恕沫,是天一觀的道長(zhǎng)监憎。 經(jīng)常有香客問(wèn)我,道長(zhǎng)婶溯,這世上最難降的妖魔是什么鲸阔? 我笑而不...
    開(kāi)封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮迄委,結(jié)果婚禮上褐筛,老公的妹妹穿的比我還像新娘。我一直安慰自己叙身,他們只是感情好渔扎,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著信轿,像睡著了一般晃痴。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上财忽,一...
    開(kāi)封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天愧旦,我揣著相機(jī)與錄音,去河邊找鬼定罢。 笑死笤虫,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的祖凫。 我是一名探鬼主播琼蚯,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼惠况!你這毒婦竟也來(lái)了遭庶?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤稠屠,失蹤者是張志新(化名)和其女友劉穎峦睡,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體权埠,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡榨了,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了攘蔽。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片龙屉。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖满俗,靈堂內(nèi)的尸體忽然破棺而出转捕,到底是詐尸還是另有隱情作岖,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布五芝,位于F島的核電站痘儡,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏枢步。R本人自食惡果不足惜沉删,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望价捧。 院中可真熱鬧丑念,春花似錦、人聲如沸结蟋。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)嵌屎。三九已至推正,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間宝惰,已是汗流浹背植榕。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留尼夺,地道東北人尊残。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像淤堵,于是被迫代替她去往敵國(guó)和親寝衫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容

  • GitChat技術(shù)雜談 前言 本文較長(zhǎng)拐邪,為了節(jié)省你的閱讀時(shí)間慰毅,在文前列寫作思路如下: 什么是 webpack,它要...
    蕭玄辭閱讀 12,698評(píng)論 7 110
  • 在現(xiàn)在的前端開(kāi)發(fā)中扎阶,前后端分離汹胃、模塊化開(kāi)發(fā)、版本控制东臀、文件合并與壓縮着饥、mock數(shù)據(jù)等等一些原本后端的思想開(kāi)始...
    Charlot閱讀 5,448評(píng)論 1 32
  • 無(wú)意中看到zhangwnag大佬分享的webpack教程感覺(jué)受益匪淺,特此分享以備自己日后查看啡邑,也希望更多的人看到...
    小小字符閱讀 8,178評(píng)論 7 35
  • 版權(quán)聲明:本文為博主原創(chuàng)文章,未經(jīng)博主允許不得轉(zhuǎn)載流部。 webpack介紹和使用 一戚绕、webpack介紹 1、由來(lái) ...
    it筱竹閱讀 11,157評(píng)論 0 21
  • 問(wèn):還沒(méi)滿一年,怎么急著想辭職果漾? 答:我也本以為自己至少能干滿一年的球切,但年后就一直處于焦慮的狀態(tài),特別是3月21號(hào)...
    戒嗔閱讀 1,603評(píng)論 1 3