webpack是當下最流行的js打包工具，這得益于網頁應用日益復雜和js模塊化的流行。webpack2增加了一些新特性也到了預發布階段，是時候告訴大家如何用webpack2優化你的構建讓它構建出更小的文件尺寸和更好的開發體驗。

優化輸出

打包結果更小可以讓網頁打開速度更快以及簡約寬帶?？梢酝ㄟ^這以下幾點做到

1、壓縮css

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

2、tree-shaking

tree-shaking 是指借助es6?import export?語法靜態性的特點來刪掉export但是沒有import過的東西。要讓tree-shaking工作需要注意以下幾點：

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

2)大多數分布到npm的庫里的代碼都是es5的，但是也有部分庫(redux,react-router等等)開始支持tree-shaking。這些庫發布到npm里的代碼即包含es5的又包含全采用了es6?import export?語法的代碼。 拿redux庫來說，npm下載到的目錄結構如下：

其中lib目錄里是編譯出的es5代碼，es目錄里是編譯出的采用import export?語法的es5代碼，在redux的package.json文件里有這兩個配置：

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

這會讓webpack先使用jsnext:main字段，在沒有時使用main字段。這樣就可以優化支持tree-shaking的庫。

3、優化 UglifyJsPlugin

webpack?--optimize-minimize?選項會開啟 UglifyJsPlugin來壓縮輸出的js，但是默認的UglifyJsPlugin配置并沒有把代碼壓縮到最小輸出的js里還是有注釋和空格，需要覆蓋默認的配置：

4、定義環境變量 NODE_ENV=production

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

在環境變量?NODE_ENV?等于?production?的時候UglifyJs會認為if語句里的是死代碼在壓縮代碼時刪掉。

5、使用 CommonsChunkPlugin 抽取公共代碼

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

6、DedupePlugin 和 OccurrenceOrderPlugin

在webpack1里經常會使用?DedupePlugin?插件來消除重復的模塊以及使用?OccurrenceOrderPlugin?插件讓被依賴次數更高的模塊靠前分到更小的id 來達到輸出更少的代碼，在webpack2里這些已經這兩個插件已經被移除了因為這些功能已經被內置了。

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

3)對于支持es6的js運行環境使用babili

以上優化點只需要在構建用于生產環境代碼的時候才使用，在開發環境時最好關閉因為它們很耗時。

優化開發體驗

優化開發體驗主要從更快的構建和更方便的功能入手。

更快的構建

1、縮小文件搜索范圍

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

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

1)loader的test正則表達式也應該盡可能的簡單，比如在你的項目里只有.js文件時就不要把test寫成/\.jsx?$/

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

只對項目目錄下src目錄里的代碼進行babel編譯

項目目錄下的所有js都會進行babel編譯，包括龐大的node_modules下的js

2、開啟 babel-loader 緩存

babel編譯過程很耗時，好在babel-loader提供緩存編譯結果選項，在重啟webpack時不需要創新編譯而是復用緩存結果減少編譯流程。babel-loader緩存機制默認是關閉的，打開的配置如下：

3、使用 alias

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

4、使用 noParse

module.noParse?配置哪些文件可以脫離webpack的解析。 有些庫是自成一體不依賴其他庫的沒有使用模塊化的，比如jquey、momentjs、chart.js，要使用它們必須整體全部引入。 webpack是模塊化打包工具完全沒有必要去解析這些文件的依賴，因為它們都不依賴其它文件體積也很龐大，要忽略它們配置如下：

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

1)使用happypack多進程并行構建

更方便的功能

1、模塊熱替換

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

1)在啟動webpack-dev-server的時候帶上--hot參數開啟模塊熱替換，在開啟--hot后針對css的變化是會自動熱替換的，但是js涉及到復雜的邏輯還需要進一步配置。

2)配置頁面入口文件

當./app發生變化或者當./app依賴的文件發生變化時會把./app編譯成一個模塊去替換老的，替換完畢后重新執行run函數渲染出最新的效果。

2、自動生成html

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

webpack配置

將會輸出一個index.html文件，這個文件將會自動引入 entry?A?和?B?生成的js文件，

輸出的html:

輸出的目錄結構

分析輸出結果

webpack有一個工具叫做webpack analyze?以可視化的方式直觀的分析構建，來進一步優化構建結果和速度。要使用它你需要在執行webpack的時候帶上--json --profile2個參數，這代表讓webpack把構建結果以json輸出并帶上構建性能信息，使用如下：

會生產一個stats.json文件，再打開webpack analyze?上傳這個文件開始分析。

最后附上這篇文章所講到的webpack整體的配置，分為開發環境的webpack.config.js和生產環境的webpack-dist.config.js

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。