為了vue-cli spa項(xiàng)目?jī)?yōu)化首屏所做的事情

layman 發(fā)布于2019-08-20 18:24 / 447人閱讀

摘要：第一次寫(xiě)項(xiàng)目，但是在實(shí)踐的過(guò)程發(fā)現(xiàn)了很多坑，這篇文章主要講述的是項(xiàng)目首屏加載過(guò)慢的大坑。建議使用，相對(duì)來(lái)說(shuō)算是比較快的了。在官方文檔中有相關(guān)實(shí)現(xiàn)的代碼，很簡(jiǎn)單。畢竟首屏加載，優(yōu)化都得靠了。

第一次寫(xiě) vue spa項(xiàng)目，但是在實(shí)踐的過(guò)程發(fā)現(xiàn)了很多坑，這篇文章主要講述的是spa項(xiàng)目首屏加載過(guò)慢的大坑。
在webpack的配置中，在打包的過(guò)程中，會(huì)將所有的庫(kù)都打包到vendor.js中，所以導(dǎo)致了vendor.js這包過(guò)大，而頁(yè)面要想出現(xiàn)數(shù)據(jù)必須在vendor.js加載完成以后，所以后面所做的努力基本就是想辦法把vendor.js的體積變小。

1.externals

在webpack.base.conf.js這個(gè)文件中，module.exports輸出的對(duì)象里面加一個(gè)key 叫做 externals,配置如下

//webpack.base.conf.js
 externals: {
        "vue": "Vue",
        "vue-router": "VueRouter",
        "vuex": "Vuex",
        "axios": "axios",
        // "vue-lazyload": "VueLazyload",
        "moment": "moment",
        // "element-ui": "element-ui"
    }
//index.html

externals的左邊是給 require用的 ,右邊是給全局調(diào)用的。建議使用bootcdn，相對(duì)來(lái)說(shuō)算是比較快的cdn了。
還有一種是dll打包，目前沒(méi)有實(shí)踐過(guò)，下次可以試試。

2.開(kāi)啟gzip

后端用的是nginx，稍微配置即可開(kāi)啟gzip

sudo nano /etc/nginx/nginx.conf
在Gzip Settings里加入：

gzip on;
gzip_min_length 1k;
gzip_buffers 4 16k;
gzip_comp_level 5;
gzip_types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php;

開(kāi)啟了以后，js、css相關(guān)的代碼可以壓縮將近5倍的體積。

3.開(kāi)啟路由懶加載

開(kāi)啟了以后不同的路由組件可以分成不同的代碼，從而實(shí)現(xiàn)進(jìn)入相應(yīng)頁(yè)面以后才加載相關(guān)代碼。
在官方文檔中有相關(guān)實(shí)現(xiàn)的代碼，很簡(jiǎn)單。

//引入的時(shí)候改成懶加載的形式
const admin = resolve => require(["../views/admin.vue"], resolve);

4.bundleAnalyzerReport檢測(cè)包的情況

在config/index.js中一個(gè)相關(guān)插件叫做bundleAnalyzerReport，上面有幾行注釋，講的是只要在打包的時(shí)候輸入npm run build --report,就可以在打包的同時(shí)查看每個(gè)打包生成的js，里面的庫(kù)的構(gòu)成情況，方便我們進(jìn)行相關(guān)的刪減，比如有的庫(kù)太大了，是否可以自己實(shí)現(xiàn)，有的庫(kù)是否有必要，可否刪除之類。

5.服務(wù)端加載

額，這個(gè)太難搞了，剛?cè)胄衝ode.js只會(huì)npm這一點(diǎn)相關(guān)知識(shí)，以后有空要好好學(xué)學(xué)，聽(tīng)說(shuō)通過(guò)nuxt.js是比較容易上手，還得以后慢慢實(shí)踐。畢竟首屏加載，seo優(yōu)化都得靠SSR(service side render)了。