| 效果 | |
|---|---|
| 無優化 | 單個JS文件，大于10M |
| 懶加載 | 多個JS文件，最大的3M |
| uglify | 多個JS文件，最大的1.5M |
| gzip | 多個JS文件，最大的473K |
| 代碼層面 | todo |
懶加載
Vue 的文檔里面有詳細的說明，利用的是 webpack 的分包機制，將單獨的 app.js 文件依照路由系統打包成許多不同的文件，當用戶訪問的某個路由的時候才產生加載動作
https://router.vuejs.org/en/advanced/lazy-loading.html
uglify
laravel-mix 在執行 npm run prod 的時候會自動調用 uglify，將前端代碼進行壓縮處理：
https://laravel.com/docs/5.5/mix
https://github.com/mishoo/UglifyJS2
gzip
在 Nginx 或者 Apache 上打開配置，就可以實現 gzip
http://nginx.org/en/docs/http/ngx_http_gzip_module.html
代碼層面
比如去掉一些可以不依賴的庫，換某些庫的lite版等等，某人建議的是每個JS文件的大小不要超過300K，傳輸時間在3s以內
分析一個JS文件的構成，是很重要的進行代碼層面優化的前提，webpack 官方推薦了一些工具（4個），可以做 bundle analysis
官方文檔：https://webpack.js.org/guides/code-splitting/#bundle-analysis
Webpack Bundle Analyzer 是比較熟悉的一個，這里是一個使用教程：
https://www.youtube.com/watch?v=ltlxjq4YEKU
在 laravel-mix 中的配置可以參考：
https://github.com/JeffreyWay/laravel-mix/issues/1216
最終的效果如：
前端性能調優的目標
單個JS文件在300K以內
整個頁面的載入時間期望值是1.5s可接受時間是3s，絕對不能超過5s，否則90%用戶都會流失
