1.資源壓縮與合併 可以使用gulp和webpack 主要作用都是對css和js和html進行壓縮 減少網站http請求的次數

這時就會有gulp和webpack的區別： 簡單一句總結 如果是框架模組化的話一般都用webpack 因為webpack是側重模組打包 大一點的專案時，有些不用模組化就用gulp 因為gulp規範前端開發

gulp： 強調的是前端開發的流程，通過配置一系列的task，定義task處理的事務（例如：檔案壓縮合並，啟動server），然後定義執行順序，來讓gulp執行task，從而構建其前端專案的流程。合併後仍然是你寫的程式碼，只是區域性變數名被替換，一些語法做了轉換而已，整體內容並沒有發生改變。gulp.config.js中gulp的程式碼更加簡單易懂，

webpack：側重模組打包，把開發中的所有資源（圖片，js檔案，css檔案等）都開成模組，通過loader（載入器）和plugins（外掛）對資源進行處理，打包成符合生產環境部署的前端資源。打包後的程式碼已經不只是你寫的程式碼，其中夾雜很多webpack自身的模組處理程式碼。

他們的定位是不同的：gulp來說，他旨在規範前端開發流程；webpack更是明顯強調模組化開發，而那些檔案壓縮合並、預處理等功能，不過是他附帶的功能。

使用：除了前端模組化開發，模組之間充分依賴的專案，都不值得webpack去構建；除此之外的構建工作都應該交給gulp，目前大一點的專案，webpack和gulp都是同時存在的，只是各自負責擅長的那部分，比如webapck將模組，互相依賴的分散的程式碼打包成數個檔案，然後在使用gulp任務去壓縮，加版本號，替換等等工作。

2.非同步載入 一般用async await 方法

3.利用瀏覽器快取 路由懶載入 keep alive

4.使用cdn加速器提高訪問速度。CDN的實現原理依賴於預解析DNS

預解析：在從上到下執行程式碼。這就是一個預解析的過程。