webpack是當(dāng)下最流行的js打包工具，這得益于網(wǎng)頁(yè)應(yīng)用日益復(fù)雜和js模塊化的流行。webpack2增加了一些新特性也到了預(yù)發(fā)布階段，是時(shí)候告訴大家如何用webpack2優(yōu)化你的構(gòu)建讓它構(gòu)建出更小的文件尺寸和更好的開發(fā)體驗(yàn)。

優(yōu)化輸出

打包結(jié)果更小可以讓網(wǎng)頁(yè)打開速度更快以及簡(jiǎn)約寬帶。可以通過這以下幾點(diǎn)做到

1、壓縮css

css-loader?在webpack2里默認(rèn)是沒有開啟壓縮的，最后生成的css文件里有很多空格和tab，通過配置?css-loader?minimize參數(shù)可以開啟壓縮輸出最小的css。css的壓縮實(shí)際是是通過cssnano實(shí)現(xiàn)的。

2、tree-shaking

tree-shaking 是指借助es6?import export?語(yǔ)法靜態(tài)性的特點(diǎn)來(lái)刪掉export但是沒有import過的東西。要讓tree-shaking工作需要注意以下幾點(diǎn)：

1)配置babel讓它在編譯轉(zhuǎn)化es6代碼時(shí)不把import export轉(zhuǎn)換為cmd的module.export，配置如下：

2)大多數(shù)分布到npm的庫(kù)里的代碼都是es5的，但是也有部分庫(kù)(redux,react-router等等)開始支持tree-shaking。這些庫(kù)發(fā)布到npm里的代碼即包含es5的又包含全采用了es6?import export?語(yǔ)法的代碼。 拿redux庫(kù)來(lái)說(shuō)，npm下載到的目錄結(jié)構(gòu)如下：

其中l(wèi)ib目錄里是編譯出的es5代碼，es目錄里是編譯出的采用import export?語(yǔ)法的es5代碼，在redux的package.json文件里有這兩個(gè)配置：

這是指這個(gè)庫(kù)的入口文件的位置，所以要讓webpack去讀取es目錄下的代碼需要使用jsnext:main字段配置的入口，要做到這點(diǎn)webpack需要這樣配置：

這會(huì)讓webpack先使用jsnext:main字段，在沒有時(shí)使用main字段。這樣就可以優(yōu)化支持tree-shaking的庫(kù)。

3、優(yōu)化 UglifyJsPlugin

webpack?--optimize-minimize?選項(xiàng)會(huì)開啟 UglifyJsPlugin來(lái)壓縮輸出的js，但是默認(rèn)的UglifyJsPlugin配置并沒有把代碼壓縮到最小輸出的js里還是有注釋和空格，需要覆蓋默認(rèn)的配置：

4、定義環(huán)境變量 NODE_ENV=production

很多庫(kù)里(比如react)有部分代碼是這樣的：

在環(huán)境變量?NODE_ENV?等于?production?的時(shí)候UglifyJs會(huì)認(rèn)為if語(yǔ)句里的是死代碼在壓縮代碼時(shí)刪掉。

5、使用 CommonsChunkPlugin 抽取公共代碼

CommonsChunkPlugin可以提取出多個(gè)代碼塊都依賴的模塊形成一個(gè)單獨(dú)的模塊。要發(fā)揮CommonsChunkPlugin的作用還需要瀏覽器緩存機(jī)制的配合。在應(yīng)用有多個(gè)頁(yè)面的場(chǎng)景下提取出所有頁(yè)面公共的代碼減少單個(gè)頁(yè)面的代碼，在不同頁(yè)面之間切換時(shí)所有頁(yè)面公共的代碼之前被加載過而不必重新加載。這個(gè)方法可以非常有效的提升應(yīng)用性能。

6、DedupePlugin 和 OccurrenceOrderPlugin

在webpack1里經(jīng)常會(huì)使用?DedupePlugin?插件來(lái)消除重復(fù)的模塊以及使用?OccurrenceOrderPlugin?插件讓被依賴次數(shù)更高的模塊靠前分到更小的id 來(lái)達(dá)到輸出更少的代碼，在webpack2里這些已經(jīng)這兩個(gè)插件已經(jīng)被移除了因?yàn)檫@些功能已經(jīng)被內(nèi)置了。

除了壓縮文本代碼外還可以：

3)對(duì)于支持es6的js運(yùn)行環(huán)境使用babili

以上優(yōu)化點(diǎn)只需要在構(gòu)建用于生產(chǎn)環(huán)境代碼的時(shí)候才使用，在開發(fā)環(huán)境時(shí)最好關(guān)閉因?yàn)樗鼈兒芎臅r(shí)。

優(yōu)化開發(fā)體驗(yàn)

優(yōu)化開發(fā)體驗(yàn)主要從更快的構(gòu)建和更方便的功能入手。

更快的構(gòu)建

1、縮小文件搜索范圍

webpack的resolve.modules配置模塊庫(kù)(通常是指node_modules)所在的位置，在js里出現(xiàn)import 'redux'這樣不是相對(duì)也不是絕對(duì)路徑的寫法時(shí)會(huì)去node_modules目錄下找。但是默認(rèn)的配置會(huì)采用向上遞歸搜索的方式去尋找node_modules，但通常項(xiàng)目目錄里只有一個(gè)node_modules在項(xiàng)目根目錄，為了減少搜索我們直接寫明node_modules的全路徑：

除此之外webpack配置loader時(shí)也可以縮小文件搜索范圍。

1)loader的test正則表達(dá)式也應(yīng)該盡可能的簡(jiǎn)單，比如在你的項(xiàng)目里只有.js文件時(shí)就不要把test寫成/\.jsx?$/

2)loader使用include命中只需要處理的文件，比如babel-loader的這兩個(gè)配置:

只對(duì)項(xiàng)目目錄下src目錄里的代碼進(jìn)行babel編譯

項(xiàng)目目錄下的所有js都會(huì)進(jìn)行babel編譯，包括龐大的node_modules下的js

2、開啟 babel-loader 緩存

babel編譯過程很耗時(shí)，好在babel-loader提供緩存編譯結(jié)果選項(xiàng)，在重啟webpack時(shí)不需要?jiǎng)?chuàng)新編譯而是復(fù)用緩存結(jié)果減少編譯流程。babel-loader緩存機(jī)制默認(rèn)是關(guān)閉的，打開的配置如下：

3、使用 alias

resolve.alias?配置路徑映射。 發(fā)布到npm的庫(kù)大多數(shù)都包含兩個(gè)目錄，一個(gè)是放著cmd模塊化的lib目錄，一個(gè)是把所有文件合成一個(gè)文件的dist目錄，多數(shù)的入口文件是指向lib里面下的。 默認(rèn)情況下webpack會(huì)去讀lib目錄下的入口文件再去遞歸加載其它依賴的文件這個(gè)過程很耗時(shí)，alias配置可以讓webpack直接使用dist目錄的整體文件減少文件遞歸解析。配置如下：

4、使用 noParse

module.noParse?配置哪些文件可以脫離webpack的解析。 有些庫(kù)是自成一體不依賴其他庫(kù)的沒有使用模塊化的，比如jquey、momentjs、chart.js，要使用它們必須整體全部引入。 webpack是模塊化打包工具完全沒有必要去解析這些文件的依賴，因?yàn)樗鼈兌疾灰蕾嚻渌募w積也很龐大，要忽略它們配置如下：

除此以外還有很多可以加速的方法：

1)使用happypack多進(jìn)程并行構(gòu)建

更方便的功能

1、模塊熱替換

模塊熱替換是指在開發(fā)的過程中修改代碼后不用刷新頁(yè)面直接把變化的模塊替換到老模塊讓頁(yè)面呈現(xiàn)出最新的效果。 webpack-dev-server內(nèi)置模塊熱替換，配置起來(lái)也很方便，下面以react應(yīng)用為例，步驟如下：

1)在啟動(dòng)webpack-dev-server的時(shí)候帶上--hot參數(shù)開啟模塊熱替換，在開啟--hot后針對(duì)css的變化是會(huì)自動(dòng)熱替換的，但是js涉及到復(fù)雜的邏輯還需要進(jìn)一步配置。

2)配置頁(yè)面入口文件

當(dāng)./app發(fā)生變化或者當(dāng)./app依賴的文件發(fā)生變化時(shí)會(huì)把./app編譯成一個(gè)模塊去替換老的，替換完畢后重新執(zhí)行run函數(shù)渲染出最新的效果。

2、自動(dòng)生成html

webpack只做了資源打包的工作還缺少把這些加載到html里運(yùn)行的功能，在龐大的app里手寫html去加載這些資源是很繁瑣易錯(cuò)的，我們需要自動(dòng)正確的加載打包出的資源。 webpack原生不支持這個(gè)功能于是我做了一個(gè)插件?web-webpack-plugin?具體使用點(diǎn)開鏈接看詳細(xì)文檔，使用大概如下：

webpack配置

將會(huì)輸出一個(gè)index.html文件，這個(gè)文件將會(huì)自動(dòng)引入 entry?A?和?B?生成的js文件，

輸出的html:

輸出的目錄結(jié)構(gòu)

分析輸出結(jié)果

webpack有一個(gè)工具叫做webpack analyze?以可視化的方式直觀的分析構(gòu)建，來(lái)進(jìn)一步優(yōu)化構(gòu)建結(jié)果和速度。要使用它你需要在執(zhí)行webpack的時(shí)候帶上--json --profile2個(gè)參數(shù)，這代表讓webpack把構(gòu)建結(jié)果以json輸出并帶上構(gòu)建性能信息，使用如下：

會(huì)生產(chǎn)一個(gè)stats.json文件，再打開webpack analyze?上傳這個(gè)文件開始分析。

最后附上這篇文章所講到的webpack整體的配置，分為開發(fā)環(huán)境的webpack.config.js和生產(chǎn)環(huán)境的webpack-dist.config.js

總結(jié)

以上是生活随笔為你收集整理的webpack 图片压缩不起作用_理论｜webpack2 终极优化的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。