前端首屏優化策略
花了兩週多，終於完成了一個基本無 bug 的專案，但是有個比較大的問題就是：在 webpack 測試環境下，編譯時間太久了，app.js 太大了，導致頁面初始化極其的慢，雖然說正式環境下不會有這個問題，同事也說測試環境 1000 kb 左右正常，不用優化，但是自己的頁面開啟慢還是讓人感到極其不爽的，花了兩個鐘左右，我把 app.js 從 1983 kb 縮小到了 1083 kb，壓縮之後為 273 kb，首屏執行速度從原來的可能要十多秒，提升到了 166 ms，我是怎麼做到這些的呢？主要策略如下：
首先，從包開始優化，我用的包就一個 elementUI，用過的人應該都知道，這個包有幾百 kb，簡直就是惡魔啊，所以，必須要打壓他一下。這裡的主要策略就是按需引入 elementUI，關於 elementUI 的按需引入，官方有介紹，看ofollow,noindex">這裡 ，這裡我要講的是，官方可能叫你這麼引入這個庫的：
在 main.js 引入改庫 import Vue from 'vue'; import { Button, Select } from 'element-ui'; import App from './App.vue'; Vue.component(Button.name, Button); Vue.component(Select.name, Select); /* 或寫為 * Vue.use(Button) * Vue.use(Select) */ new Vue({ el: '#app', render: h => h(App) });
這種引用方式在實際引用中，會大大增加 app.js 的體積，所以，這裡，我是把 elemenui 相關的引用放到相應的元件裡面，以元件的形式去引用，這樣，app.js 的體積會縮小很多。
然後，就是寫程式碼的習慣了，比如引用元件，儘量用以下形式，代替 import from 的方式：
const Loading = () => import('@/components/Common/loading');
這種方式引入元件的好處是，webpack 會對程式碼進行自動分割，非同步載入元件，從而實現路由的懶載入，根據需求引入不同的元件，而不是第一次載入就全部引入。更詳細的解釋看這裡
接著就是把程式碼裡的 console 相關的語句去掉啦，別看 console 只是稍微的呼叫了一下函式，看起來對效能影響不大，但是程式碼裡滿是 console 語句，就會有一點影響了，所以還是能去掉就去掉為好。除了去除 console 相關語句，別忘了把多餘的程式碼和元件也去掉，這會一定程度上減少包的體積。
最後就是網路請求能少則少啦，但是個人不太推薦用快取的，問題太多了，後期。