首屏渲染优化策略

Leo_chen 发布于2019-08-26 10:43 / 3307人阅读

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...

私有云混合云首屏首屏标准首屏加载首屏速度

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/106649.html

Rax 淘宝双11 双12 实战

摘要：首先了解一下淘宝双促中的长列表模块，也就是类型的模块。在模块渲染数据时，会将数据发送给页面的，判断这是一组数据时进行真实数据的渲染小结第一次接受淘宝双促的考验，在化性能稳定性等多个方面表现优异，达成了预定的目标。 showImg(https://segmentfault.com/img/remote/1460000009614810); Rax is a universal JavaS...

BigTomato 2019-06-25 11:19 评论0 收藏0
Rax 淘宝双11 双12 实战

摘要：首先了解一下淘宝双促中的长列表模块，也就是类型的模块。在模块渲染数据时，会将数据发送给页面的，判断这是一组数据时进行真实数据的渲染小结第一次接受淘宝双促的考验，在化性能稳定性等多个方面表现优异，达成了预定的目标。 showImg(https://segmentfault.com/img/remote/1460000009614810); Rax is a universal JavaS...

v1 2019-06-25 16:12 评论0 收藏0
这么多前端优化点你都记得住吗？

摘要：不推荐移动端浏览器前端优化策略相对于桌面端浏览器，移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 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