首屏渲染优化策略

2024年2月23日 119次阅读 来源: vikeel

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…

    原文作者：vikeel
    原文地址: https://segmentfault.com/a/1190000020036585
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞