webpack優化-有解無憂

一、使用webpack優化前端性能方法

?webpack優化前端性能是指優化webpack的輸出結果,讓打包的最終結果在瀏覽器運?快速?效，
可通過webpack優化前端的手段：
- 代碼壓縮（洗掉多余的代碼、注釋、簡化代碼的寫法等等?式）
  - HTML檔案代碼壓縮
    - 使用HTMLWebpackPlugin插件來生成HTML的模板時候，通過配置屬性minify進行HTML優化，
  - CSS代碼壓縮
    - 利? cssnano （css-loader?minimize）來壓縮css，
  - JS代碼壓縮
    - 利?webpack的 UglifyJsPlugin 和 ParallelUglifyPlugin 來壓縮JS?件，
- 檔案大小壓縮
  - 對檔案的大小進行壓縮，減少http傳輸程序中寬帶的損耗，
- 圖片壓縮
- Tree Shaking
  - 將代碼中永遠不會?到的?段洗掉掉（消除死代碼），可以通過在啟動webpack時追加引數 --optimize-minimize 來實作，
- 代碼分離
  - 代碼按路由維度或者組件分塊(chunk),這樣做到按需加載,同時可以充分利?瀏覽器快取，
- 提取公共第三?庫
  - SplitChunksPlugin插件來進?公共模塊抽取,利?瀏覽器快取可以?期快取這些?需頻繁變動的公共代碼，

二、提高webpack構建速度方法

優化webpack構建的方式有很多，主要可以從優化搜索時間、縮小檔案搜索范圍、減少不必要的編譯等方面入手，
- 優化loader配置
  - 在使用loader時，可以通過配置include、exclude、test屬性來匹配檔案，縮小檔案的搜索范圍，優化搜索時間
- 多??情況下，使? CommonsChunkPlugin 來提取公共代碼
- 通過 externals 配置來提取常?庫，脫離webpack打包，不被打?bundle中，從?減少打包時間
- 利? DllPlugin 和 DllReferencePlugin 預編譯資源模塊通過 DllPlugin 來對那些我們引?但是絕對不會修改的npm包來進?預編譯，再通過 DllReferencePlugin 將預編譯的模塊加載進來，讓?些基本不會改動的代碼先打包成靜態資源，避免反復編譯浪費時間
- 使? Happypack 實作多執行緒加速編譯
- 使? webpack-uglify-parallel 來提升 uglifyPlugin 的壓縮速度，原理上 webpack-uglify-parallel 采?了多核并?壓縮來提升壓縮速度
- 使? Tree-shaking 和 Scope Hoisting 來剔除多余代碼
- 利?快取提?rebuild效率

三、減少webpack打包時間方法

優化 Loader
- 對于 Loader 來說，影響打包效率首當其沖必屬 Babel 了，因為 Babel 會將代碼轉為字串生成 AST，然后對 AST 繼續進行轉變最后再生成新的代碼，專案越大，轉換代碼越多，效率就越低，
  - 可以將 Babel 編譯過的檔案快取起來，下次只需要編譯更改過的代碼檔案即可，這樣可以大幅度加快打包時間.
```
loaders: ['babel-loader?cacheDirectory=true']
```
  - 優化 Loader 的檔案搜索范圍，
    - 對于 Babel 來說，希望只作用在 JS 代碼上的，然后 node_modules 中使用的代碼都是編譯過的，所以完全沒有必要再去處理一遍，
```
module.exports = {
    module: {
	rules: [
	        {	
                  // js檔案才使用babel
		  test: /\.js$/,
                  loader: 'babel-loader',
                  // 只在src檔案夾下查找
		  include: [resolve('src')],
                  // 不會去查找的路徑
		  exclude: /node_modules/,
		}
	  ]
     }
}
```

HappyPack

受限于 Node 是單執行緒運行的，所以 Webpack 在打包的程序中也是單執行緒的，特別是在執行 Loader 的時候，長時間編譯的任務很多，這樣就會導致等待的情況，HappyPack 可以將 Loader 的同步執行轉換為并行的，這樣就能充分利用系統資源來加快打包效率了，

module: {
	loaders: [
		  {
		    test: /\.js$/,
		    include: [resolve('src')],
		    exclude: /node_modules/,
		    // id后面的內容對應下面
                loader: 'happypack/loader?id=happybabel'
		  }
	    ]
},
plugins: [
    new HappyPack({
        id: 'happybabel',
        loaders: ['babel-loader?cacheDirectory'],
        // 開啟4個執行緒
        threads: 4
    })
]

DllPlugin
- DllPlugin 可以將特定的類別庫提前打包然后引入，這種方式可以極大的減少打包類別庫的次數，只有當類別庫更新版本才有需要重新打包，并且也實作了將公共代碼抽離成單獨檔案的優化方案，
代碼壓縮
- 在 Webpack3 中，一般使用 UglifyJS 來壓縮代碼，但是這個是單執行緒運行的，為了加快效率，可以使用 webpack-parallel-uglify-plugin 來并行運行 UglifyJS，從而提高效率，在 Webpack4 中，不需要以上這些操作了，只需要將 mode 設定為 production 就可以默認開啟以上功能，代碼壓縮也是我們必做的性能優化方案，當然我們不止可以壓縮 JS 代碼，還可以壓縮 HTML、CSS 代碼，并且在壓縮 JS 代碼的程序中，我們還可以通過配置實作比如洗掉 console.log 這類代碼的功能，
其他
- resolve.extensions
  - 用來表明檔案后綴串列，默認查找順序是 ['.js', '.json']，如果你的匯入檔案沒有添加后綴就會按照這個順序查找檔案，我們應該盡可能減少后綴串列長度，然后將出現頻率高的后綴排在前面，
- resolve.alias
  - 可以通過別名的方式來映射一個路徑，能讓 Webpack 更快找到路徑，
- module.noParse
  - 如果你確定一個檔案下沒有其他依賴，就可以使用該屬性讓 Webpack 不掃描該檔案，這種方式對于大型的類別庫很有幫助，

四、減少webpack打包體積方法

按需加載
- 在開發 SPA 專案的時候，專案中都會存在很多路由頁面，如果將這些頁面全部打包進一個 JS 檔案的話，雖然將多個請求合并了，但是同樣也加載了很多并不需要的代碼，耗費了更長的時間，那么為了首頁能更快地呈現給用戶，希望首頁能加載的檔案體積越小越好，這時候就可以使用按需加載，將每個路由頁面單獨打包為一個檔案，當然不僅僅路由可以按需加載，對于 loadash 這種大型類別庫同樣可以使用這個功能，
Scope Hoisting
- Scope Hoisting 會分析出模塊之間的依賴關系，盡可能的把打包出來的模塊合并到一個函式中去，這樣的打包方式生成的代碼明顯比之前的少多了，如果在 Webpack4 中你希望開啟這個功能，只需要啟用 optimization.concatenateModules 就可以了，
```
module.exports = {
  optimization: {
	  concatenateModules: true
    }
}
```
Tree Shaking
- Tree Shaking 可以實作洗掉專案中未被參考的代碼（死代碼），

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/510959.html

標籤：其他

上一篇：優化 JS 程式的一個小方法

下一篇：webpack打包思路與流程決議