美文网首页
预渲染实践小记

预渲染实践小记

作者: 天一呀 | 来源:发表于2019-05-12 23:21 被阅读0次

    由于公司某些页面要做SEO优化(搜索和加载优化),另外一些页面耦合很低的落地面分享面但又不想单独拆出去,之前也用ssr尝试过并不是十分友好,所以这次看了预渲染的介绍,发现在现vue项目上成本很并且非常的适合

    特点

    访问预渲染出来的页面在访问时与SSR一样快,并且它将服务端编译HTML的时机提前到了构建时,因此也降低了服务端的压力。不过SSR和预渲染的使用场景还是有较明显的区别的。预渲染的使用场景更多是简单的静态页面。服务端渲染适用于复杂、较大型、与服务端交互频繁的功能型网站,比如电商网站。

    1. 基于vue-cli3
    2. prerender-spa-plugin
    3. puppeteer

    文章是基于一个新项目,老项目只需要配置插件即可

    vue create my-project
    先创建一个项目,随便选一下就行

    npm install prerender-spa-plugin --save-dev 安装插件

    ps: 还需要puppeteer 才可以否则build会报错

    npm install -g cnpm --registry=https://registry.npm.taobao.org
    cnpm i puppeteer

    插件配置

                new PrerenderSPAPlugin({
                    // 生成文件的路径,也可以与webpakc打包的一致。
                    // 下面这句话非常重要!!!
                    // 这个目录只能有一级,如果目录层次大于一级,在生成的时候不会有任何错误提示,在预渲染的时候只会卡着不动。
                    staticDir: path.join(__dirname,'dist'),
                    // 对应自己的路由文件,比如a有参数,就需要写成 /a/param1。
                    routes: ['/', '/product','/about'],
                    // 这个很重要,如果没有配置这段,也不会进行预编译
                    renderer: new Renderer({
                        inject: {
                        },
                        headless: false,
                        // 在 main.js 中 document.dispatchEvent(new Event('render-event')),两者的事件名称要对应上。
                        renderAfterDocumentEvent: 'render-event'
                    })
                }),
    

    main 配置

      new Vue({
        el: '#app',
        render: h => h(App),
        mounted() { // 需要配置这个属性
            document.dispatchEvent(new Event('render-event'))
        }
      })
    

    最后
    这时候执行npm run build就可以生成刚刚配置在PrerenderSPAPlugin插件中routes中的页面html了,这过程中会一闪而过的短暂打开chromium浏览器,不用管。

    ps router的mode 一定要是history模式

    相关文章

      网友评论

          本文标题:预渲染实践小记

          本文链接:https://www.haomeiwen.com/subject/vknhaqtx.html