亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

為了vue-cli spa項目優(yōu)化首屏所做的事情

layman / 514人閱讀

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

第一次寫 vue spa項目，但是在實踐的過程發(fā)現(xiàn)了很多坑，這篇文章主要講述的是spa項目首屏加載過慢的大坑。
在webpack的配置中，在打包的過程中，會將所有的庫都打包到vendor.js中，所以導(dǎo)致了vendor.js這包過大，而頁面要想出現(xiàn)數(shù)據(jù)必須在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用的 ,右邊是給全局調(diào)用的。建議使用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相關(guān)的代碼可以壓縮將近5倍的體積。

3.開啟路由懶加載

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

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

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

5.服務(wù)端加載

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/84459.html

相關(guān)文章

  • 2017-07-30 前端日報

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

    oujie 評論0 收藏0

  • Vue SPA(單頁應(yīng)用)首屏優(yōu)化實踐

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

    wall2flower 評論0 收藏0

  • 日常筆記

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

    Enlightenment 評論0 收藏0

  • 影響網(wǎng)頁渲染的關(guān)鍵

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

    weknow619 評論0 收藏0

  • 用vue從零開發(fā)和部署一款移動端pwa單頁應(yīng)用

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

    Channe 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<