最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

Vue頁面首次載入優(yōu)化的全過程

 更新時(shí)間:2021年12月01日 09:25:00   作者:一尾流鶯  
凡是做SPA的項(xiàng)目,特別是移動(dòng)端的SAP項(xiàng)目,首屏加載速度必定是一個(gè)繞不過去的話題,下面這篇文章主要給大家介紹了關(guān)于Vue頁面首次載入優(yōu)化的相關(guān)資料,需要的朋友可以參考下

前言

今天是把自己開發(fā)的博客系統(tǒng)發(fā)布到了線上,但就只是把build出來的dist文件夾隨便扔在了云服務(wù)器根目錄下,導(dǎo)致在首次進(jìn)入頁面的時(shí)候非常的慢.所以需要進(jìn)行優(yōu)化.

優(yōu)化前的大小

1.圖片優(yōu)化

之前為了方便開法,背景圖片直接在assets里面扔了一個(gè)jpg,導(dǎo)致加載這張圖片的時(shí)候就用了十幾秒,于是乎我就把圖片上傳空間了,然后改用網(wǎng)絡(luò)地址.

2.禁止生成.map文件

build出來的dist文件夾里面有很多的.map文件,這些文件主要是幫助線上調(diào)試代碼,查看樣式.由于基本都是本地調(diào)試好,線上不需要怎么修改,所以就禁止生成這些文件.

在vue.config.js里面加上這句.

3.路由懶加載

\

4.cdn引入公共庫

    <link rel="stylesheet"  rel="external nofollow" >
    <script src="https://cdn.bootcss.com/vue/2.6.11/vue.min.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.19.2/axios.min.js"></script>
    //cdn引入
    configureWebpack: {
        externals: {
            'vue': 'Vue',
            'element-ui': 'ELEMENT',
            'vue-router': 'VueRouter',
            'vuex': 'Vuex',
            'axios': 'axios'
        }
    }

網(wǎng)上說可以把import注釋掉,親自操作會(huì)報(bào)錯(cuò),也有資料說不用注釋也不會(huì)打包

一頓操作最后的文件,效果顯著,app.js還是很大

5.終極法寶 GZIP壓縮

做完這個(gè)感覺前四步都是小菜一碟,直接把1.4m的app.js干成一百多kb,其他的都不足掛齒了

 configureWebpack: config => {
        return {
            //配置cdn
            externals: {
                'vue': 'Vue',
                'element-ui': 'ELEMENT',
                'vue-router': 'VueRouter',
                'vuex': 'Vuex',
                'axios': 'axios'
            },
            //配置gzip壓縮
            plugins: [
                new CompressionWebpackPlugin({

                    test: new RegExp('\.(js|css)$'),
                    threshold: 10240,
                    minRatio: 0.8
                })
            ],
        }
    }

服務(wù)端也要配,不然不認(rèn)識GZIP文件

//配置GZIP壓縮模塊
const compression = require('compression');
//在所有中間件之前引入
app.use(compression());

最垃圾的服務(wù)器通過以上幾個(gè)優(yōu)化,一樣飛起來了!!!

對比一下,結(jié)果顯而易見!!!

6.利用vue-router進(jìn)行頁面的懶加載(lazy load)

這里的頁面的懶加載是指,假如我現(xiàn)在訪問A頁面,只會(huì)去請求A頁面里的東西,其他頁面的東西不會(huì)去請求。

具體怎么做,vue-router的官網(wǎng)都寫得很清楚了,有需要的去看一下就懂了:

通過vue-router實(shí)現(xiàn)頁面的懶加載

總結(jié)

到此這篇關(guān)于Vue頁面首次載入優(yōu)化的文章就介紹到這了,更多相關(guān)Vue頁面首次載入優(yōu)化內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評論

梨树县| 克拉玛依市| 麻栗坡县| 张家口市| 施甸县| 永寿县| 凤山市| 高唐县| 洪湖市| 辛集市| 海林市| 台前县| 奈曼旗| 繁昌县| 莒南县| 铜山县| 新绛县| 崇仁县| 横峰县| 五河县| 武乡县| 五莲县| 方城县| 左云县| 娄底市| 新河县| 霞浦县| 文水县| 治县。| 洛宁县| 武威市| 息烽县| 清远市| 盘山县| 西安市| 茶陵县| 洛隆县| 叶城县| 章丘市| 尉犁县| 衡东县|