Alex Liu's Blog

axios 是一個 Promise based 的 Http 請求工具，他可以運行在瀏覽器環境與 Node.js 中。相信在 AJAX 技術被廣泛應用的今日，稍微有一點經驗的捧油門對他一定都不陌生。上篇對 axios 的核心程式設計做了剖析，這篇要來從 axios 的適配器（adapter，介面）的設計認識 XMLHttpRequest 物件，並且了解 axios 取消請求的設計。那就就讓我們一起看下去吧！

axios 是一個 Promise based 的 HTTP 請求工具，他可以運行在「瀏覽器環境」與「Node.js」中。相信在 AJAX 技術被廣泛應用的今日，稍微有一點經驗的捧油門對他一定都不陌生。因此這系列分享不會特別著重在如何使用 axios，而是針對幾個我覺得 axios 有趣、好用的地方，研究他的原始碼是如何撰寫的，從中吸收寶貴的經驗。那就就讓我們一起看下去吧！

動態載入（Dynamic import）可以有效的減少 Webpack 打包後的 bundle size。適當地使用動態載入，將不立即需要的 code 切分至獨立的模塊（chunk）可以在初次載入時帶來更好的使用者體驗。此外 webpack 也為動態載入提供了一些 Magic Comments，讓開發人員能更有彈性的調整各項細節。本篇將一一介紹這些 Comment 的用法並搭配簡易範例來呈現、說明。

Smart Prefetching（或稱 Router Prefetch） 機制改善了使用者等待換頁請求的體驗，他讓頁面切換更為順暢。在 Nuxt.js 中內建的 <nuxt-link> 組件也實做了這項功能，讓我們一起從 Nuxt.js 的 source code 中認識這項技術並從中吸取大神們的寶貴經驗吧！

剛進入業界時，為了提高網頁的效能以及更豐富的網頁互動效果，會利用 bLazy.js 實作圖片延遲載入或是用 waypoints.js 執行間單的進場效果。不過後來發現 Intersection Observer 這個瀏覽器原生的 Web API 讓這一切變得更簡單使用而且效能也更好。

在使用 Vue 在製作比較複雜的專案時，可能會因應不同的頁面需求需要有多種不同的 Layout 設定，在 Nuxt.js 可以輕鬆的利用屬性來設定，但在 Vue CLI 下或是 Gridsome 中要如何實作呢？這裡將分享幾種實作方式。