為了vue-cli spa項目優化首屏所做的事情

layman 發布于2019-08-20 18:24 / 457人閱讀

摘要：第一次寫項目，但是在實踐的過程發現了很多坑，這篇文章主要講述的是項目首屏加載過慢的大坑。建議使用，相對來說算是比較快的了。在官方文檔中有相關實現的代碼，很簡單。畢竟首屏加載，優化都得靠了。

第一次寫 vue spa項目，但是在實踐的過程發現了很多坑，這篇文章主要講述的是spa項目首屏加載過慢的大坑。
在webpack的配置中，在打包的過程中，會將所有的庫都打包到vendor.js中，所以導致了vendor.js這包過大，而頁面要想出現數據必須在vendor.js加載完成以后，所以后面所做的努力基本就是想辦法把vendor.js的體積變小。

1.externals

在webpack.base.conf.js這個文件中，module.exports輸出的對象里面加一個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用的 ,右邊是給全局調用的。建議使用bootcdn，相對來說算是比較快的cdn了。
還有一種是dll打包，目前沒有實踐過，下次可以試試。

2.開啟gzip

后端用的是nginx，稍微配置即可開啟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;

開啟了以后，js、css相關的代碼可以壓縮將近5倍的體積。

3.開啟路由懶加載

開啟了以后不同的路由組件可以分成不同的代碼，從而實現進入相應頁面以后才加載相關代碼。
在官方文檔中有相關實現的代碼，很簡單。

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

4.bundleAnalyzerReport檢測包的情況

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

5.服務端加載

額，這個太難搞了，剛入行node.js只會npm這一點相關知識，以后有空要好好學學，聽說通過nuxt.js是比較容易上手，還得以后慢慢實踐。畢竟首屏加載，seo優化都得靠SSR(service side render)了。

GPU云服務器云服務器數據分析做的事情數據分析每天要做的事情自己做的項目怎么找云服務器所做

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/84459.html

2017-07-30 前端日報

摘要：前端日報精選譯避免這些常見的錯誤可視化分析的內存分配與回收手機里的注冊那些事兒入門基礎使用高性能種提升速度的新工具中文必知必會學習筆記一個人文章在中正確的尾部調用眾成翻譯擴展運算符眾成翻譯眾成翻譯我們對流行框架們的選擇為了 2017-07-30 前端日報精選【譯】避免這些常見的JavaScript錯誤可視化分析js的內存分配與回收手機QQ里的注冊那些事兒Node.js 入門：Exp...

oujie 2019-08-20 18:25 評論0 收藏0
Vue SPA(單頁應用)首屏優化實踐

摘要：原文首發代碼壓縮如果你用的是服務器，請修改配置文件其他類似在里加入開啟或者關閉模塊，這里使用表示啟動設置允許壓縮的頁面最小字節數默認值是，不管頁面多大都壓縮設置系統獲取幾個單位的緩存用于存儲的壓縮結果數據流代表以為單位，按照原始數據大原文首發：　https://shuirong.github.io/ 1.代碼壓縮(gzip) 如果你用的是nginx服務器，請修改配置文件(其他web ...

wall2flower 2019-08-21 11:41 評論0 收藏0
日常筆記

摘要：同構和直出服務端渲染出首屏，主要為了減少用戶等待的時間，縮短白屏時間，在移動數據網絡情況下能夠獲得較好的用戶體驗。在優化渲染時間的時候監控頁面情況很有用。 @(StuRep)2016.06.11 react+node同構和直出服務端渲染出首屏，主要為了減少用戶等待的時間，縮短白屏時間，在移動數據網絡情況下能夠獲得較好的用戶體驗。了解了一下react實現同構和直出的方案，收藏了一些還...

Enlightenment 2019-08-22 10:38 評論0 收藏0
影響網頁渲染的關鍵

摘要：最優化渲染路徑，實際上只要聚焦三件事情最小化關鍵資源的數量最小化關鍵字節數最小化關鍵路徑的長度理解頁面加載速度的測量辦法當百度談論頁面加載速度時，他們并不是指加載一個網頁的總時間。張超 — MAY 21, 2015 經常有站長、開發者、運維疑惑：為什么我們的后臺服務器很快，但是用戶要看網頁里面的內容卻需要很長時間？我們在上一篇文章《怪獸大作戰: 解析網站打開慢的原因》中簡單介紹了影...

weknow619 2019-05-28 16:53 評論0 收藏0
用vue從零開發和部署一款移動端pwa單頁應用

摘要：另外，單頁應用因為數據前置到了前端，不利于搜索引擎的抓取。所以我們需要對自己的單頁應用進行一些優化。前言最近秋招之余空出時間來按自己的興趣動手做了一個項目，一個基于vue-cli3.0, vue，typescript的移動端pwa，現在趁熱打鐵，將這個項目從開發到部署整個過程記錄下來，并將從這個項目中學習到的東西分享出來，如果大家有什么意見或補充也可以在評論區提出。先介紹一下這個項...

Channe 2019-07-25 14:28 評論0 收藏0