直播網址: https://www.facebook.com/will.fans/videos/1834092806619855/ 在這前端工程正夯的年代，有越來越多的開發工具會幫你把 JS 合併與壓縮 (最佳化)，但在瀏覽器中，看見這些壓縮過的 JS 檔案，根本無法進行即時偵錯，因為連原始碼都看不懂，我要怎樣 debug 呢？ 多年前由 Joseph Schorr 設計出第一代的 source map format (v1)，大家開始能夠對這些最佳化過的原始碼進行偵錯，同時在開發測試的過程中，也可以從瀏覽器得到最佳化之前的原始碼內容。 本次的直播課程，我將帶來 Source Maps (v3) 的各項技術細節，從如何產生 map 檔案，到如何在瀏覽器中對各式最佳化過後的原始碼進行偵錯，歡迎大家邀集親朋好友，跟我一起學習這項前端工程師不可不知的開發技術吧！  最後，我在講解完 Source Maps 基本觀念與應用技巧後，便會開放大家隨意提問，歡迎大家踴躍參與！ ※ 本活動將以 Facebook 直播方式進行，請記得訂閱 Will 保哥的技術交流中心的「搶先看」以免錯過直播連結！ 落

1. 前端工程師不可不知的 Source Maps 應用技巧
多奇數位創意有限公司
技術總監 黃保翕 ( Will 保哥 )
部落格：http://blog.miniasp.com/
新手入門篇

2. 錄影重播
http://bit.ly/sourcemaps4all

3. 認識 Source Maps
Introduction to Source Maps
3

4. 很久很久以前 …
• 小明為客戶設計了一個 HTML 網頁
– https://github.com/doggy8088/sourcemapdemo
• 當客戶下載並執行網頁之後
– git clone https://github.com/doggy8088/sourcemapdemo.git
• 抱怨網頁載入速度太慢了
– 因為 main.js 有 620KB 這麼大！
• 然後 ……

5. 小明決定改善網頁效能
• 他找到了全新的 UglifyJS 3 套件可以有效壓縮 JS 檔案
– https://github.com/mishoo/UglifyJS2
• 透過 npm 安裝了 uglify-js 套件
– https://www.npmjs.com/package/uglify-js
– npm i -g uglify-js
• 產生了壓縮過的 JS 檔案 ( 620K  141KB )
– uglifyjs -o main.min.js main.js
– 修改 index.html 並將 main.js 改成載入 main.min.js 檔案
• 然後 ……

6. 如何對最佳化過的 JS 進行偵錯
• 用肉眼分析壓縮過的程式碼
• 用 PrettyPrint 擴充套件(Chrome)自動格式化原始碼
• 用 F12 開發者工具的 Sources 的自動格式化功能
6

7. 使用 Source Map 技術
• 產生 Source map 檔案
– uglifyjs --source-map -o main.min.js main.js
• 啟用 Source map 功能
– 先確定瀏覽器有啟用 Source maps
• IE11 / Edge (來源對應)
• Chrome (Source map)
• Firefox (Source map)
– 再確認你的 *.min.js 檔案有連結到 *.min.js.map
1. 手動加入 source map 檔案 ( 僅 Chrome 支援 )
2. //# sourceMappingURL=/path/to/file.js.map
3. X-SourceMap: /path/to/file.js.map 7

8. Chrome 瀏覽器的 Source maps 設定
• 預設啟用 JavaScript 與 CSS 的 Source maps
8

9. IE11/Edge 瀏覽器的 Source maps 設定
• 預設啟用 JavaScript 的 Source maps
9

10. 關於 JS 最佳化 (合併、壓縮)
• 合併
– 將多個 JS 檔案合併成一個
– 減少 HTTP 要求次數以提升瀏覽效率
• 壓縮 (醜化)
– 將 JS 中多餘的空白字元刪除
– 將 JS 中過長的區域變數變短
– 縮小 JS 檔案大小，以加快檔案下載速度
• 常見工具
– uglify-js、webpack module bundler、TypeScript

11. 以 jQuery 原始碼為例
Source Maps Example: jQuery
11

12. 下載 jQuery 原始碼
• Downloading jQuery
http://jquery.com/download/
12

13. 完整的 jQuery 原始碼
• 官網的檔案連結
– https://code.jquery.com/jquery-3.2.1.js
– https://code.jquery.com/jquery-3.2.1.min.js
– https://code.jquery.com/jquery-3.2.1.min.map
• 透過 npm 安裝
– npm i jquery
13

14. 以 Angular 4 原始碼為例
Source Maps Example: Angular 4
14

15. 查詢 Source maps 對應的原始碼
15

16. 相關連結
• Introduction to JavaScript Source Maps
• MDN / Firefox
– Use a source map - Firefox Developer Tools
• MSDN / IE11 / Edge
– 使用偵錯工具檢查執行中的 JavaScript - 來源對應
– Inspect running JavaScript with the Debugger
• Chrome
– Enabling Source Maps in Chrome

17. 聯絡資訊
• 多奇教育訓練最新課程
– https://coolrare.accupass.com
• The Will Will Web
記載著 Will 在網路世界的學習心得與技術分享
– http://blog.miniasp.com/
• Will 保哥的技術交流中心 (臉書粉絲專頁)
– http://www.facebook.com/will.fans
• Will 保哥的噗浪
– http://www.plurk.com/willh/invite
• Will 保哥的推特
– https://twitter.com/Will_Huang