Webpack性能優化

Babel-loader ：轉換ES六、ES7等JS新特性語法。

Css-loader：支持.css文件的加載和解析轉換成commonjs對象

Style-loader：將樣式經過<style>標籤插入到head中

Less-loader ：將less文件轉換成css

Ts-loader：將TS轉換成JS

File-loader：進行圖片、文字等的打包、富媒體文件、字體。

url-loader：處理圖片和字體

Raw-loader：將文件以字符串的形式導入。

Thread-loader：多進程打包JS和CSS

CleanWebpackPlugin：清理構建目錄

ExtractTextWebpackPlugin：將CSS從bundle文件裏提取成獨立的CSS文件

HtmlWebpackPlugin：建立html文件去承載輸出的bundle

UglifyWebpackPlugin：壓縮JS

PostCSS + autoprefixer： ⾃動補⻬ CSS3 前綴。

px2rem-loader：移動端 CSS px ⾃動轉換成 rem。 ⻚⾯渲染時計算根元素的 font-size 值，可使⽤⼿淘的lib-flexible庫換成 rem。

熱更新

HotModuleReplacementPlugin

原理：分爲第一次打包和第二次打包，第一次打包將js代碼打包成bundle.js傳給Bundle Server而後讓客戶端能夠以loacalhost8080這種服務器訪問的方式訪問。第二次，當我修改了代碼以後，webpack會打補丁同樣，將修改的部分打包，而後給到HMR server，這個服務器就會以字符串的形式，告訴HMR runtime，哪些地方被修改了，哪些地方須要更新。

文件指紋：用來作版本的管理，好比某個文件修改了，並不須要把全部的文件都

發佈，只要發佈修改了的那部分就好了。

文件指紋

Hash：和整個項⽬的構建相關，只要項⽬⽂件有修改，整個項⽬構建的 hash 值就會更改

Chunkhash：和 webpack 打包的 chunk 有關，不一樣的 entry 會⽣成不一樣的 chunkhash 值

Contenthash：根據⽂件內容來定義 hash ，⽂件內容不變，則 contenthash 不變。

性能優化：

l JS壓縮：內置了 uglifyjs-webpack-plugin，webpack4若是mode設置成production那麼將會自動的進行壓縮。

l CSS⽂件的壓縮：使⽤ optimize-css-assets-webpack-plugin。同時使⽤ cssnano。

l HTML⽂件的壓縮：html-webpack-plugin。

l 基礎庫分離：html-webpackexternals-plugin。思路：將 react、 react-dom 基礎包經過 cdn 引⼊，不打⼊ bundle 中。

l 公共腳本分離：SplitChunksPlugin，分離⻚⾯公共⽂件。

l tree shaking(搖樹優化)：個模塊可能有多個⽅法，只要其中的某個⽅法使⽤到了，則整個⽂件都會被打到bundle ⾥⾯去， tree shaking 就是隻把⽤到的⽅法打⼊ bundle ， 沒⽤到的⽅法會在uglify 階段被擦除掉。

l scope hoisting

現象：構建後的bundle.js代碼存在⼤量閉包代碼. 運⾏代碼時建立的函數做⽤域變多，內存開銷變⼤,⼤量做⽤域包裹代碼，致使體積增⼤（模塊越多越明顯）

結論:被 webpack 轉換後的模塊會帶上⼀層包裹。import 會被轉換成 __webpack_require

分析：

· 打包出來的是⼀個匿名閉包

· modules 是⼀個數組，每⼀項是⼀個模塊初始化函數

· 經過 WEBPACK_REQUIRE_METHOD(0) 啓動程序

原理： 將全部模塊的代碼按照引⽤順序放在⼀個函數做⽤域⾥，而後適當的重命名一些變量以防⽌變量名衝突。

對⽐：經過 scope hoisting 能夠減小函數聲明代碼和內存開銷。

l 代碼分割：

對於⼤的 Web 應⽤來說，將全部的代碼都放在⼀個⽂件中顯然是不夠有效的，特別是當你的某些代碼塊是在某些特殊的時候纔會被使⽤到。 webpack 有⼀個功能就是將你的代碼庫分割成chunks（語塊），當代碼運⾏到須要它們的時候再進⾏加載。

懶加載：plugin-syntax-dynamic-import

服務端渲染：HTML + CSS + JS + Data -> 渲染後的 HTML。

全部模板等資源都存儲在服務端，內⽹機器拉取數據更快，⼀個 HTML 返回全部數據

客戶端渲染：多個請求（HTML，數據），HTML和數據串行加載、前端渲染。

服務端渲染： 一個請求，返回HTML和數據。核心是減小請求。

服務端渲染優點：減小⽩屏時間、對於 SEO 友好。客戶端渲染剛開始拉下來的HTML實際上是一個空的模板，而服務端渲染拉下來的時候頁面就有數據比較豐富，有利於爬蟲抓取數據。

思路：使⽤ react-dom/server 的 renderToString ⽅法將React 組件渲染成字符串，再把這個string丟到HTML模板裏面去，服務端路由返回對應的模板。

作法：使⽤打包出來的瀏覽器端 html 爲模板，在模板中設置佔位符，動態插⼊組件，就能夠解決樣式不顯示的問題。經過設置佔位符，服務端獲取數據而後替換佔位符。

多頁應用：每⼀次⻚⾯跳轉的時候，後臺服務器都會給返回⼀個新的 html ⽂檔，這種類型的⽹站也就是多⻚⽹站，也叫作多⻚應⽤。glob.sync。