首屏渲染優化策略

Leo_chen 發布于2019-08-26 10:43 / 3459人閱讀

1. webpack打包時：

生產環境下盡可能減少依賴包，按需引用    （webpack-bundle-analyzer）

2. 組件分塊按需加載

import Vue from "vue"; 
import Router from "vue-router";

Vue.use(Router);

export default new Router({
    mode: "history",
    linkActiveClass: "router-link-class",
    routes: [
        {
            path: "/",
            component: resolve => require(["../components/組件"]， resolve),
        }
    ] })

3. 使用預渲染

// webpack.prod.config.js

cnpm i prerender-spa-plugin --save-dev
cnpm i vue-meta-info --save-dev

const PrerenderSPAPlugin = require("prerender-spa-plugin");
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;

plugins: [
    new PrerenderSPAPlugin({
        // 生成靜態文件的目錄，路徑只能是一級
        staticDir: path.join(__dirname, "../dist"),
        // 對應需要預渲染的路由文件
        routes: ["/", "/detail"],
        // 預編譯
        renderer: new Renderer({
            inject: {
                foo: "bar"
            },
            headless: false,
            // 將在main.js的 document.dispatchEvent(new Event("render-event"))中觸發
            renderAfterDocumentEvent: "render-event"
        })
    })
]

// main.js

import Vue from "vue";
// 網頁標簽支持
import VueMetaInfo from "vue-meta-info";
Vue.use(VueMetaInfo);

new Vue({
    el: "#app",
    router,
    store,
    render: h => h(App),
    mounted() {
        document.dispatchEvent(new Event("render-event"))
    }
})


# new Router({
#    mode: "history"  // 必須使用‘history’模式
# })

// 頁面中處理  ***.vue
export default {
    metaInfo: {
        title: "頁面標題",
        meta: [
            {
                name: "keywords",
                content: "關鍵字"
            },
            {
                name: "description",
                content: "描述"
            }
        ]
    }
}

4.使用gzip壓縮減小傳輸文件大小
// 以 Nginx 服務器為例

http {
    
    ............
    
    # 啟用gzip
    gzip on;
    # 啟用gzip壓縮的最小文件
    gzip_min_length 1k;
    #設置壓縮緩沖區大小，此處設置為4個16K內存作為壓縮結果流緩存
    gzip_buffers 4 16k;
    # gzip 壓縮級別，1-10，數字越大壓縮的越好，也越占用CPU時間
    gzip_comp_level 2;
    # 進行壓縮的文件類型。javascript有多種形式。其中的值可以在 mime.types 文件中找到。
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png font/ttf font/otf image/svg+xml;
    # 是否在http header中添加Vary: Accept-Encoding，建議開啟
    gzip_vary on;
    # 禁用IE 6 gzip
    gzip_disable "MSIE [1-6].";
    
    .....................
    
}

5. 服務端渲染

案例： https://gitee.com/vikeel/mySe...

GPU云服務器云服務器首屏首屏標準首屏加載首屏速度

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

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

這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

ysl_unh 2019-08-21 17:30 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

Tecode 2019-08-01 17:58 評論0 收藏0
這么多前端優化點你都記得住嗎？

摘要：不推薦移動端瀏覽器前端優化策略相對于桌面端瀏覽器，移動端瀏覽器上有一些較為明顯的特點設備屏幕較小新特性兼容性較好支持一些較新的和特性需要與應用交互等。 GitHub鏈接：https://github.com/zwwill/blo... 圍繞前端的性能多如牛毛，涉及到方方面面，以我我們將圍繞PC瀏覽器和移動端瀏覽器的優化策略進行羅列注意，是羅列不是展開，遇到不會不懂的點還請站外擴展開車...

Tonny 2019-08-29 13:47 評論0 收藏0