vue 如何優(yōu)化首頁的加載速度？

• 路由懶加載
• ui框架按需加載
• gzip壓縮

vue首頁白屏是什么問題引起的

• 第一種，打包后文件引用路徑不對，導(dǎo)致找不到文件報錯白屏

解決辦法：修改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因為index.html里邊的內(nèi)容都是通過script標簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認的路徑。

• 第二種，由于把路由模式mode設(shè)置影響

解決方法：路由里邊router/index.js路由配置里邊默認模式是hash，如果你改成了history模式的話，打開也會是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認的就行 。如果非要使用history模式的話，需要你在服務(wù)端加一個覆蓋所有的情況的候選資源：如果URL匹配不到任何靜態(tài)資源，則應(yīng)該返回一個index.html，這個頁面就是你app依賴頁面。

所以只要刪除mode或者把mode改成hash就OK了。

• 第三種，項目中使用了es6的語法，一些瀏覽器不支持es6，造成編譯錯誤不能解析而造成白屏

解決方法：

安裝 npm install --save-dev babel-preset-es2015

安裝 npm install --save-dev babel-preset-stage-3

在項目根目錄創(chuàng)建一個.babelrc文件 里面內(nèi)容 最基本配置是：

{// 此項指明，轉(zhuǎn)碼的規(guī)則"presets": [// env項是借助插件babel-preset-env，下面這個配置說的是babel對es6,es7,es8進行轉(zhuǎn)碼，并且設(shè)置amd,commonjs這樣的模塊化文件，不進行轉(zhuǎn)碼["env", {"modules": false}],// 下面這個是不同階段出現(xiàn)的es語法，包含不同的轉(zhuǎn)碼插件"stage-2"],// 下面這個選項是引用插件來處理代碼的轉(zhuǎn)換，transform-runtime用來處理全局函數(shù)和優(yōu)化babel編譯"plugins": ["transform-runtime"],// 下面指的是在生成的文件中，不產(chǎn)生注釋"comments": false,// 下面這段是在特定的環(huán)境中所執(zhí)行的轉(zhuǎn)碼規(guī)則，當(dāng)環(huán)境變量是下面的test就會覆蓋上面的設(shè)置"env": {// test 是提前設(shè)置的環(huán)境變量，如果沒有設(shè)置BABEL_ENV則使用NODE_ENV，如果都沒有設(shè)置默認就是development"test": {"presets": ["env", "stage-2"],// instanbul是一個用來測試轉(zhuǎn)碼后代碼的工具"plugins": ["istanbul"]}}
}