[TOC] ## 文件合并 ## 代碼壓縮 ### HTML壓縮 ~~~ new HtmlWebpackPlugin({ template: __dirname + '/views/index.html', // new 一個這個插件的實例，并傳入相關的參數 filename: '../index.html', minify: { removeComments: true, collapseWhitespace: true, removeRedundantAttributes: true, useShortDoctype: true, removeEmptyAttributes: true, removeStyleLinkTypeAttributes: true, keepClosingSlash: true, minifyJS: true, minifyCSS: true, minifyURLs: true, }, chunksSortMode: 'dependency' }) ~~~ 我們在使用html-webpack-plugin 自動化注入JS、CSS打包HTML文件時，很少會為其添加配置項，這里我給出樣例，大家直接復制就行。 > 在我們書寫HTML元素的src 或 href 屬性時，可以省略協議部分，這樣也能簡單起到節省資源的目的。 > <br> ### 提取css并壓縮 在使用webpack的過程中，我們通常會以模塊的形式引入css文件（webpack的思想不就是萬物皆模塊嘛），但是在上線的時候，我們還需要將這些css提取出來，并且壓縮，這些看似復雜的過程只需要簡單的幾行配置就行： > 們需要用到extract-text-webpack-plugin ，所以還得大家自行npm install > ~~~ const ExtractTextPlugin = require('extract-text-webpack-plugin') module: { rules: [..., { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: { loader: 'css-loader', options: { minimize: true } } }) }] } ~~~ <br> ### JS壓縮 ~~~ new webpack.optimize.UglifyJsPlugin() ~~~ <br> ## 代碼分割 ### 提取公共資源 ~~~ new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', filename: 'scripts/common/vendor-[hash:5].js' }) ~~~ > 這里是webpack3的語法，在webpack4中已作更改，希望大家注意 > 使用webpack3的新特性：ModuleConcatenationPlugin ~~~ new webpack.optimize.ModuleConcatenationPlugin() ~~~ <br> ### Tree-shaking Tree-shaking 是一種清理構建過程的方法通過只加載生產中實際使用的代碼并清除 在 Webpack 中 未使用的 import。使用 Webpack 3 和 Rollup，我們還可以使用 scope hoisting(作用域提升)，scope hoisting 允許工具檢測哪些 import 可以被提升或者可以轉換成一個內聯函數。有了 Webpack 4，你現在可以使用 JSON Tree Shaking。UnCSS 或者 Helium 可以幫助你去刪除未使用 CSS 樣式。 <br> ### Code-splitting Code-splitting 是 Webpack 的另一個特性，可將你的代碼分解為按需加載的“塊”。并不是所有的 JavaScript 都是必須下載、解析和編譯的。一旦你在代碼中確定了分割點，Webpack 會處理這些依賴關系和輸出文件。在應用發送請求的時候，這樣基本上確保初始的下載足夠小并且實現按需加載。 <br> ## 圖片處理 ### css sprites雪碧圖 <br> ### font-icon字體圖標 iconfont字體文件是用字體編碼的形式來實現圖標效果，既然是文字，那就可以隨意設置顏色設置大小，相對來說比sprite方案更好。但是它只適用于純色圖標。推薦使用 [阿里巴巴矢量圖標庫](https://link.jianshu.com/?t=http://iconfont.cn/) <br> ### 圖片base64編碼傳輸 webpack url-loader對未設置或者小于limit設置的圖片進行轉換，以base64的格式被 img 的 src 所使用；而對于大于limit byte的圖片用file-loader進行解析 ~~~ { test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, loader: 'url-loader', options: { limit: 10000, name: utils.assetsPath('img/[name].[hash:7].[ext]') } }, ~~~ 注意：cssnano壓縮css的時候，對于部分規則的base64 uri不能識別，會出現誤傷，如下圖，cssnano壓縮的時候會將//壓縮為/：  cssnano壓縮base64 原因是：cssnano會跳過 data:image/data:application 后面的字符串，但是不會跳過 data:img ，所以如果你使用的工具生成的是 data:img ，建議換工具或者直接將其修改為 data:image 。 <br> ### SVG圖片 <br> ### 圖片壓縮 <br> ### 使用WebP WebP格式，是谷歌公司開發的一種旨在加快圖片加載速度的圖片格式。圖片壓縮體積大約只有JPEG的2/3，并能節省大量的服務器帶寬資源和數據空間。Facebook、Ebay等知名網站已經開始測試并使用WebP格式。  webp優化能在jpg的基礎上再降低近50%的大小。其優化效果明顯。此外，如果瀏覽器支持webpanimation，還能對gif做壓縮。   實現方案： * 判斷瀏覽器對webp及webpanimation的兼容性。 * 如果瀏覽器支持webp及webpanimation，將其替換成webp格式的圖片。 鑒于瀏覽器對webp的支持比較局限，我們采用漸進升級的方式來優化：對于不支持webp的瀏覽器，不做處理；對于支持webp的瀏覽器，將圖片src替換成webp格式。 ~~~ // 檢測瀏覽器是否支持webp // 之所以沒寫成回調，是因為即使isSupportWebp=false也無大礙，但卻可以讓代碼更容易維護 (function() { function webpTest(src, name) { var img = new Image(), isSupport = false, className, cls; img.onload = function() { isSupport = !!(img.height > 0 && img.width > 0); cls = isSupport ? (' ' + name) : (' no-' + name); className = document.querySelector('html').className className += cls; document.querySelector('html').className = className.trim(); }; img.onerror = function() { cls = (' no-' + name); className = document.querySelector('html').className className += cls; document.querySelector('html').className = className.trim(); }; img.src = src; } var webpSrc = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoB\ AAEAAwA0JaQAA3AA/vuUAAA=', webpanimationSrc = 'data:image/webp;base64,UklGRlIAAABXRUJQVlA4WAoAAAA\ SAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAA\ AAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA'; webpTest(webpSrc, 'webp'); webpTest(webpanimationSrc, 'webpanimation'); })(); ~~~ 借鑒modernizr，實現了檢測webp/webpanimation兼容性的函數，從代碼中可以看出，檢測原理就是模擬下載對應格式的圖片，在異步函數中可以得到兼容性結果。 接下來就是替換url為webp格式 ~~~ // 獲取webp格式的src function _getWebpSrc(src) { var dpr = Math.round(window.devicePixelRatio || 1), ratio = [1, 1, 1.5, 2, 2, 2], elHtml = document.querySelector('html'), isSupportWebp = (/(^|\s)webp(\s|$)/i).test(elHtml.className), isSupportWebpAnimation = (/(^|\s)webpanimation(\s|$)/i).test(elHtml.className), deviceWidth = elHtml.clientWidth, isQiniuSrc = /img\.qdaily\.com\//.test(src), format = _getFormat(src), isGifWebp, isNotGifWebp, regDetailImg; if (!src || !isQiniuSrc || !format || format == 'webp') { return src; } isNotGifWebp = (format != 'gif' && isSupportWebp); isGifWebp = (format == 'gif' && isSupportWebpAnimation); // 根據屏幕分辨率計算大小 src = src.replace(/\/(thumbnail|crop)\/.*?(\d+)x(\d+)[^\/]*\//ig, function(match, p0, p1, p2) { if(dpr > 1){ p1 = Math.round(p1 * ratio[dpr]); p2 = Math.round(p2 * ratio[dpr]); match = match.replace(/\d+x\d+/, p1 + 'x' + p2) } return match; }); if(isNotGifWebp || isGifWebp) { // 替換webp格式，首頁/列表頁 src = src.replace(/\/format\/([^\/]*)/ig, function(match, p1) { return '/format/webp'; }); } } ~~~ 注意事項 * window的屏幕像素密度不一定是整數，mac瀏覽器縮放之后，屏幕像素密度也不是整數。所以獲取dpr一定要取整：dpr = Math.round(window.devicePixelRatio || 1);。 * ratio = [1, 1, 1.5, 2, 2, 2]表示：1倍屏使用1倍圖，2倍屏使用1.5倍圖，3倍屏以上都用2倍圖。這兒的規則可以按實際情況來設置。 * webp優化更適合托管到第三方的圖片，簡單修改參數就可以獲取不同的圖片。   如上所述，在對webp優化的時候，我們順道模擬實現了srcset：根據屏幕像素密度來設置最適合的圖片寬高。 <br> ### 響應式圖片 盡可能通過 srcset，sizes 和 picture 元素使用 響應式圖片。也可以通過 picture 元素使用 WebP 格式的圖像（Chrome，Opera，Firefox soon支持），或者一個 JPEG 的回調（見 Andreas Bovens 的 code snippet）或者通過使用內容協商（使用 Accept 頭信息）。 <br> ## 字體 首先需要問一個問題，你是否能不使用 UI 系統字體。 如果不可以，那么你有很大可能使用 Web 網絡字體，會包含字形和額外的功能以及用不到的加粗。你可以向字體設計公司獲取網絡字體子集或子集，如果您使用的是開源字體（例如，通過僅包含帶有某些特殊的重音字形的拉丁語），則可以只選擇部分 Web 字體來減少其文件大小。 WOFF2 的支持非常好，對于不支持WOFF2的瀏覽器，你可以使用 WOFF 和 OTF 作為不支持它的瀏覽器的備選。另外，從 Zach Leatherman 的《字體加載策略綜合指南》（代碼片段也可以作為 Web字體加載片段）中選擇一種策略，并使用服務器緩存持久地緩存字體。是不是感覺小有成就？Pixel Ambacht 有一個 快速教程和案例研究，讓你的字體按順序排列。 如果你無法從你的服務器拿到字體并依賴于第三方主機，請確保使用 字體加載事件（或對不支持它的瀏覽器使用 Web字體加載器）FOUT 要優于 FOIT; 立即開始渲染文本，并異步加載字體 —— 也可以使用 loadCSS。 你也可以 擺脫本地安裝的操作系統字體，也可以使用 可變的 字體。 怎么才能是一個無漏洞的字體加載策略？ 從 font-display 開始，然后到 Font Loading API，然后到 Bram Stein 的 Font Face Observer。如果你有興趣從用戶的角度來衡量字體加載的性能， Andreas Marschke 探索了 使用 Font API 和 UserTiming API 進行性能跟蹤。 此外，不要忘記包含 font-display：optional 描述符來提供彈性和快速的字體回退，unicode-range 將大字體分解成更小的語言特定的字體，以及Monica Dinculescu 的字體樣式匹配器 用來解決由于兩種字體之間的大小差異，最大限度地減少了布局上的震動的問題。 參考資料 [網站性能優化實戰——從12.67s到1.06s的故事](https://zhuanlan.zhihu.com/p/35224473) [2018 前端性能優化清單 - 掘金](https://juejin.im/post/5a966bd16fb9a0635172a50a#heading-1) [完整攻略！讓你的網頁加載時間降低到 1s 內！ - 簡書](https://www.jianshu.com/p/d857c3ff78d6)