资讯专栏INFORMATION COLUMN

首屏渲染优化策略

Leo_chen / 3433人阅读

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

相关文章

  • 这么多前端优化点你都记得住吗?

    摘要:不推荐移动端浏览器前端优化策略相对于桌面端浏览器,移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接:https://github.com/zwwill/blo... 围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意,是罗列不是展开,遇到不会不懂的点还请站外扩展 开车...

    ysl_unh 评论0 收藏0
  • 这么多前端优化点你都记得住吗?

    摘要:不推荐移动端浏览器前端优化策略相对于桌面端浏览器,移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接:https://github.com/zwwill/blo... 围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意,是罗列不是展开,遇到不会不懂的点还请站外扩展 开车...

    Tecode 评论0 收藏0
  • 这么多前端优化点你都记得住吗?

    摘要:不推荐移动端浏览器前端优化策略相对于桌面端浏览器,移动端浏览器上有一些较为明显的特点设备屏幕较小新特性兼容性较好支持一些较新的和特性需要与应用交互等。 GitHub链接:https://github.com/zwwill/blo... 围绕前端的性能多如牛毛,涉及到方方面面,以我我们将围绕PC浏览器和移动端浏览器的优化策略进行罗列注意,是罗列不是展开,遇到不会不懂的点还请站外扩展 开车...

    Tonny 评论0 收藏0

发表评论

0条评论

Leo_chen

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<