成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vue首屏加載優(yōu)化

Kaede / 3095人閱讀

摘要：為了讓事情更簡單，允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件的定義。只在組件需要渲染時觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。

庫使用情況

vue

vue-router

axios

muse-ui

material-icons

vue-baidu-map

未優(yōu)化前

首先我們在正常情況下build

優(yōu)化 1. 按需加載

當(dāng)前流行的UI框架如iview,muse-ui,Element UI都支持按需加載,只需稍微改動一下代碼.

修改前：

import MuseUI from "muse-ui"
import "muse-ui/dist/muse-ui.css"
import "muse-ui/dist/theme-light.css"
Vue.use(MuseUI)

修改后：

import appBar from "muse-ui/src/appBar"
import toast from "muse-ui/src/toast"
import drawer from "muse-ui/src/drawer"
import popup from "muse-ui/src/popup"

Vue.component(appBar.name, appBar);
Vue.component(toast.name, toast);
Vue.component(drawer.name, drawer);
Vue.component(popup.name, popup);

這里有點(diǎn)麻煩的就是你要把整個項(xiàng)目用到的muse-ui組件都注冊一遍,當(dāng)然你也可以只在用到的頁面做局部引用.
讓我們來看看使用按需加載后的效果?

在當(dāng)前項(xiàng)目引用了16個muse-ui組件的情況下 css減少了80kb,js減少了快200kb.

2. 基于DllPlugin 和 DllReferencePlugin 的 webpack 構(gòu)建優(yōu)化

這一步并沒有對項(xiàng)目產(chǎn)出的文件進(jìn)行什么優(yōu)化.而是優(yōu)化了構(gòu)建速度.
DllPlugin 預(yù)編譯模塊.有點(diǎn)像android開發(fā)中的lib Module,或者iOS的framework.
我們可以對項(xiàng)目中用到的vue,vue-router,axios,muse-ui 這些固定的,基本不變動的模塊進(jìn)行預(yù)編譯. 具體操作不在贅述,可以看一下這篇文章,也是我寫的,但是覺得自己沒講利索? .

看一下構(gòu)建時間的結(jié)果對比:

before:38291ms
after :10089ms

項(xiàng)目中多了core.dll.css和core.dll.js 他們就是劃分出來的固定的,基本不變的模塊,所以只需要編譯一次,以后引用就好.有點(diǎn)library的感覺.這樣每次構(gòu)建省去了構(gòu)建固定模塊的時間. 時間有38s降到了10s,如果你構(gòu)建比較頻繁,應(yīng)該還是很有用的.

3. 異步組件 官方文檔

官方文檔是這么介紹的:

在大型應(yīng)用中，我們可能需要將應(yīng)用拆分為多個小模塊，按需從服務(wù)器下載。為了讓事情更簡單， Vue.js 允許將組件定義為一個工廠函數(shù)，動態(tài)地解析組件的定義。Vue.js 只在組件需要渲染時觸發(fā)工廠函數(shù)，并且把結(jié)果緩存起來，用于后面的再次渲染。

修改router

before：

import search from "./search.vue"
{
            path: "/search",
            name: "search",
            component: search
}

after：

const search = resolve => require(["./search.vue"], resolve);
{
            path: "/search",
            name: "search",
            component: search
}

具體我們來看看改造后的效果:

因?yàn)槲业捻?xiàng)目目前只有7個頁面,即使把頁面都做成異步加載,效果并不是很"喜人",整體縮小了30kb.

4. 優(yōu)化組件加載時機(jī)

再使用別人的組件時,上手教程都會提示讓你在main.js里注冊一下就好.當(dāng)然這是最省事的辦法.
但是根據(jù)項(xiàng)目情況,比如我的項(xiàng)目用到了vue-baidu-map.
如果你按照默認(rèn)的加載方式,vue-baidu-map是會被打在vendor.js .但其實(shí)這個組件我只有某個二級頁面才使用.所以讓我們來調(diào)整一下加載位置看看.把注冊的vue-baidu-map放在真正使用它的地方.

這樣,verdor.js 又小了56kb.因?yàn)槭醉摳居貌坏絭ue-baidu-map. 當(dāng)然這樣會帶來一個問題:當(dāng)多個頁面使用vue-baidu-map,會出現(xiàn)多個頁面重復(fù)打包.

怎么異步加載插件,這個我還沒搞明白...

5. webpack-bundle-analyzer

webpack-bundle-analyzer是用來分析 Webpack 生成的包體組成并且以可視化的方式反饋給開發(fā)者的工具.你可以通過命令:

npm run build --report

來查看依賴關(guān)系.然后再根據(jù)具體情況劃分代碼塊.效果圖就是上面那張花里胡哨的圖...它清楚的告訴你了打包時模塊劃分的情況.

6. 前后對比:

638.7kb vs 286.2kb
這還是在未開啟gzip的情況下.

新增一張開啟gzip的截圖,84.8kb,相對最后的優(yōu)化結(jié)果286.2kb是70%的壓縮比...哈哈

總結(jié)

在使用ui庫時,盡量使用按需加載方式.

異步加載,官方文檔很詳盡,改造起來也不難,可以試試

合理規(guī)劃三方庫的引用.這個聽起來有點(diǎn)龜毛,"收益"可能也不是很高,不過是個調(diào)整方向

善用webpack-bundle-analyzer優(yōu)化項(xiàng)目依賴

服務(wù)端開啟 gzip壓縮,誰用誰知道！

如果你能看到這,十分感謝你賞臉聽一個android開發(fā)bb前端開發(fā)? .

參考

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

Webpack的dll功能

vue官方文檔-異步組件

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

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

相關(guān)文章

  • 提升90%加載速度——vuecli下的首屏性能優(yōu)化

    摘要：如果我們能把不同路由對應(yīng)的組件分割成不同的代碼塊，然后當(dāng)路由被訪問的時候才加載對應(yīng)組件，這樣就更加高效了。 前言 之前用vuecli做了個博客，是一個單頁面項(xiàng)目，大概有十個路由直接npm run build打包出來，有一個1M的巨大js文件 showImg(https://segmentfault.com/img/bVbtXVk?w=1516&h=218); 先掛載到服務(wù)器上試試好家伙...

    dreamtecher 評論0 收藏0

  • vue-cli項(xiàng)目優(yōu)化，縮短首屏加載時間

    摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設(shè)置，項(xiàng)目首屏加載時會加載整個網(wǎng)站所有的文件，所以將文件拆開，點(diǎn)擊某個頁面時再加載該頁面的是一個很好的優(yōu)化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。 主要是首屏加載太慢。 大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...

    lufficc 評論0 收藏0

  • vue-cli項(xiàng)目優(yōu)化，縮短首屏加載時間

    摘要：主要是首屏加載太慢。文件按需加載如果沒有這個設(shè)置，項(xiàng)目首屏加載時會加載整個網(wǎng)站所有的文件，所以將文件拆開，點(diǎn)擊某個頁面時再加載該頁面的是一個很好的優(yōu)化方法。在中，不要使用的方法引入組件，使用。使用插件，將的值改成。 主要是首屏加載太慢。 大文件定位我們可以使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，然后有目的的解決過大的js文件。 ...

    hedzr 評論0 收藏0

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

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

    layman 評論0 收藏0

發(fā)表評論

0條評論

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