前端優(yōu)化（webpack， js， html）

作者：夏灬影

來源：SegmentFault 思否社區(qū)

---

HTTP優(yōu)化

gzip壓縮

資源的壓縮與合并

HTTP協(xié)議上的gzip編碼是一種用來改進(jìn)web應(yīng)用程序性能的技術(shù)，web服務(wù)器和客戶端（瀏覽器）必須共同支持gzip。

瀏覽器請(qǐng)求url，并在request header中設(shè)置屬性accept-encoding:gzip。表明瀏覽器支持gzip。

• 該不該用 Gzip

• 壓縮 Gzip，服務(wù)端要花時(shí)間；解壓 Gzip，瀏覽器要花時(shí)間。中間節(jié)省出來的傳輸時(shí)間，真的那么可觀嗎？建議較大文件進(jìn)行g(shù)izp

• webpack4中啟動(dòng)gzip壓縮

• npm?i?-D?compression-webpack-plugin
  
  plugins:?[
  ??new?CompressionPlugin({
  ????filename:?"[path].gz[query]",
  ????algorithm:?"gzip",
  ????test:?/\.js$|\.html$|\.css/,
  ??? threshold: 10240, //?只處理比這個(gè)值大的資源。按字節(jié)計(jì)算
  ????minRatio:?0.8?//?????只有壓縮率比這個(gè)值小的資源才會(huì)被處理
  ????deleteOriginalAssets:?false,?//是否刪除原資源
  ??}),
  ];
  
  

詳細(xì)配置?CompressionWebpackPlugin

https://www.webpackjs.com/plugins/compression-webpack-plugin/

CDN加速

現(xiàn)在大部分云服務(wù)商都是提供cdn服務(wù)

簡(jiǎn)單的來說: 原服務(wù)器上數(shù)據(jù)復(fù)制到其他服務(wù)器上，用戶訪問時(shí)，那臺(tái)服務(wù)器近訪問到的就是那臺(tái)服務(wù)器上的數(shù)據(jù)。

CDN加速優(yōu)點(diǎn)是成本低，速度快。可以用CDN best的CDN進(jìn)行加速，免費(fèi)，可部署私有，公有CDN系統(tǒng)。可以實(shí)現(xiàn)宕機(jī)檢測(cè)，自動(dòng)切換ip，分線路，分組解析。也就是CDN加速的主要作用就是保證網(wǎng)站的正常訪問，及加快網(wǎng)站訪問速度和響應(yīng)速度，防止網(wǎng)站因黑客攻擊，DNS解析劫持故障等導(dǎo)致的網(wǎng)站服務(wù)器的宕機(jī)狀況的出現(xiàn)。

---

圖片（圖標(biāo)）方面

使用字體圖標(biāo)

推薦：Iconfont-阿里巴巴矢量圖標(biāo)庫(kù)

雪碧圖

將多個(gè)圖標(biāo)集成在一起

雪碧圖制作起來麻煩，我還是推薦Iconfont的字體圖標(biāo)啦

圖片使用Base64編碼減少頁(yè)面請(qǐng)求數(shù)（建議小圖片）

• Base64編碼圖片可以在瀏覽器自己顯示出來

• 采用Base64的編碼方式將圖片直接嵌入到網(wǎng)頁(yè)中，而不是從外部載入，如
  

  使用webpack處理圖片成 base64

  
  

  npm?install?--save-dev?url-loader
  //?webpack.config.js
  module.exports?=?{
  ??module:?{
  ????rules:?[{
  ??????test:?/\.(png|svg|jpg|gif|jpeg|ico|woff|woff2|eot|ttf|otf)$/,
  ??????use:?[{
  ??????????loader:?"url-loader",?//?根據(jù)圖片大小，把圖片優(yōu)化成base64
  ??????????options:?{
  ????????????limit:?10000,?//小于10000字節(jié)的圖片都進(jìn)行base64操作
  ??????????}
  ????????}
  ??????]
  ????}]
  ??}
  };
  
  

  webpack配置 JPG、PNG、GIF和SVG圖像的壓縮

  
  

  //?webpack.config.js
  module.exports?=?{
  ??module:?{
  ????rules:?[
  ??????{
  ????????loader:?"image-webpack-loader",?//?先進(jìn)行圖片優(yōu)化
  ????????options:?{
  ??????????mozjpeg:?{
  ????????????progressive:?true,
  ????????????quality:?65,
  ??????????},
  ??????????optipng:?{
  ????????????enabled:?false,
  ??????????},
  ??????????pngquant:?{
  ????????????quality:?"65-90",
  ????????????speed:?4,
  ??????????},
  ??????????gifsicle:?{
  ????????????interlaced:?false,
  ??????????},
  ??????????webp:?{
  ????????????quality:?75,
  ??????????},
  ????????},
  ??????},
  ????],
  ??},
  };
  
  
  

  html，css優(yōu)化

  
  

  
  
  
  ??"container">

<b id="afajh"><abbr id="afajh"></abbr></b>