本專案原始碼均可在 這裡 找到。
之前公司的官網專案靜態檔案都是放在靜態伺服器中，這其中的弊端就不贅述了。簡單說一下 cdn 的好處:
cdn 可以解決因分布、頻寬、伺服器效能帶來的訪問延遲問題，適用於站點加速、點播、直播等場景。使使用者可就近取得所需內容，解決 internet 網路擁擠的狀況，提高使用者訪問**的響應速度和成功率。控制時延無疑是現代資訊科技的重要指標，cdn 的意圖就是盡可能的減少資源在**、傳輸、鏈路抖動等情況下順利保障資訊的連貫性。cdn 就是扮演者護航者和加速者的角色，更快準狠的觸發資訊和觸達每乙個使用者，帶來更為極致的使用體驗。這裡為了最小化演示路徑，我們只上傳專案所用的 js 檔案。且 cdn 基於七牛雲。
// webpack.config.js
module.exports =
}
output.publicpath中可以配置我們的 cdn 位址（這裡你要有乙個七牛雲的 賬戶 ）。之後我們引入 qn-webpack。
plugin 配置見該 plugin 原始碼即可。這裡有乙份示例配置：
// webpack.config.js
const qiniuwebpackplugin = new qiniuwebpackplugin();
module.exports = ;
在終端中我們已經可以看到我們的 js 檔案被上傳至自己的 cdn 服務中。通過 html-webpack-plugin 我們引入 js 的路徑也相應的替換成了 cdn 位址。
很多時候，在我們的專案中，需要去：
import url from './your/img/path';// webpack.config.js
module.exports = }]
}]}}
再次執行：
兩個檔案已經被上傳至 cdn ，且路徑被替換。但是，2.74 mib與後面的[big]很是鮮豔，下一步我們需要壓縮以減少檔案體積。
之前我們可以看看 chrome 控制台：
2.7 mib的就算放在 cdn ，請求時間也超過了100ms，那麼我們開始處理。
引入 image-webpack-loader 並開始配置 webpack ：
module.exports =
}, ,
optipng: ,
pngquant: ,
gifsicle: ,
webp: }},
],}]
}}
再次打包：
效果很明顯140 ms -> 43 ms。
在進行這一步之前，需要簡單了解一下什麼是 webp 格式。
目前移動端 android 4.0 以上、pc 端 chorme 10+（14 ~ 16 有渲染bug）、opera 11+ 、safri 均支援 webp 格式。 webp 與 jpg 相比較，編碼速度慢 10 倍，解碼速度慢 1.5 倍，而絕大部分的網路應用中，都是靜態檔案，所以對於使用者使用只需要關心解碼速度即可。但實際上，webp 雖然會增加額外的解碼時間，但是由於減少了檔案體積，縮短了載入的時間，實際上檔案的渲染速度反而變快了。搬運知乎上的一張：
對於相容性，我們可以看這張圖：
考慮到相容性的問題，我們之後會進行專門處理。現在第一步則是轉化png & jpg -> webp。
這裡選用 gulp 作為轉化為 webp 的自動化構建工具。webpack 社群外掛程式看 這裡，我這裡選用 gulp 作為構建工具也是希望自己能夠控制 webp 的製作，在本地生成而不是 ci 打包時（時間有點長... 。
const gulp = require('gulp');
const webp = require('gulp-webp'); // 基於 cwebp 的 gulp 外掛程式
// 基於 cwebp 轉化
gulp.task('webp', () =>
gulp.src('src/img/*.')
.pipe(webp()) // 詳情配置見：
.pipe(gulp.dest('src/img'))
);// 監聽資料夾變化
gulp.task('watch', () =>
gulp.watch('src/img/*.', ['webp'])
);gulp.task('default', () =>
gulp.start('watch')
);
最後我們在專案中使用 webp 時候，需要判斷一下瀏覽器是否支援 webp 格式：
const canusewebp = (() => )()
// 如果可以使用 webp ，則給頂部元素加上乙個 class
if (canusewebp)
// stylus
bg($url, $type)
background-image url($url + $type)
.webp & // 如果擁有 .webp 類名，則使用 webp 格式
background-image url($url + '.webp')
// less
.mixin(@url, @type) .@);
.webps & .webp');
}}
// scss
@mixin bg($url, $type)
}
webpack打包vue專案效能優化
專案打包上線設定productionsourcemap為false減小.map檔案所佔dist檔案的體積 開啟gzip對dist檔案進一步壓縮 ps 需後端配合開啟gzip方可使用 使用cdn減小打包後vendor.js的體積，從而縮短首屏載入時間 ps 第3步如果注釋掉出現錯誤可以不進行注釋 按需...
前端優化雜記
1 每個請求都需要經過解析，連線等過程，也是相當耗時的，所以儘量減少請求，該合併的合併。2 不要出現404，請求乙個不存在的資源，可能會導致較長時間的等待和阻塞，直到伺服器返回錯誤的資訊。3 不要出現重定向，重定向相當於發起雙倍請求，耗時又耗資源。4 指令碼一定放在樣式後面，最後放在body結束標籤...
webpack 效能優化
1.2 js 與 css 並行載入 1.3 開啟多執行緒 1.4 使用 dns 載入靜態資料 2.空間維度 webpack 效能優化無非是從時間和空間兩個維度去分析。時間指的是打包時間盡可能快 空間指的是打包體積盡可能小。本文的 webpack 效能優化是基於 webpack 4.3.0 版本。本文...