解决vue ssr css内联样式和link标签重复问题

html-css027

解决vue ssr css内联样式和link标签重复问题,第1张

基于vue-cli3的项目,改造成SSR。

服务端渲染会提取组件的样式内联到html中,与link标签中的重复,使得页面体积变大,导致响应时间很慢。

原因是ssr会自动进行资源注入 Manual Asset Injection ,包含css、js等。

我们需要的是没有<style>标签的页面

所以通过配置参数,关闭资源注入。

接下来需要把css、js等文件再关联到输出的html中

当创建bundlerender的时候,我们可以使用一个模板,在这个模板里面预置页面所需要的各种资源。

思来想去,csr(客户端渲染)模式下生成的index.html再合适不过了。

而且,当build csr时,我们也可以预置一个模板,在这里添加上第三方的资源

最后是在模板中添加锚点

到这里基本大功告成

贴一下vue.config.js和build script(windows 平台)

SPA(Single Page Application)即 单页面应用 。一般也称为 客户端渲染 (Client Side Render), 简称 CSR。SPA 所需的资源,如 HTML、CSS 和 JS 等,会在一次请求中就加载完成。

SPA 有以下优点:

缺点是:

SSR(Server Side Render)即 服务端渲染 。一般也称为 多页面应用 (Mulpile Page Application),简称 MPA。

SSR 有以下优点:

缺点是:

当页面加载的 js 和 css 更多更大时,网路不够流畅时,客户端渲染的首屏出现时间会更晚。

项目结构

项目搭建步骤

2.2 创建entry-client.js

该文件注册了service worker并将vue实例挂载到#app节点。

2.3 创建entry-server.js

2.4 配置vue.config.js

如果是自己写sw.js文件,详细步骤见下方service worker小节。sw.js文件放在public文件夹下。

如果使用workbox-webpack-plugin插件自动生成service-worker.js文件,需要额外的配置

以下配置的参考文章: https://developers.google.com/web/tools/workbox/reference-docs/latest/module-workbox-webpack-plugin.GenerateSW#GenerateSW

2.5 配置package.json

build:server 命令使用cross-env库设置了环境变量SSR。如此process.env.SSR为true

在Application/Cache Storage中查看sw缓存的资源