Open yanyue404 opened 2 years ago
SSR
SSR(Server Side Render) 是指服务端渲染,在我们 web 较早的时候,开发者喜欢使用 jsp、php 或者其他模板渲染引擎来构造一个应用,当客户端向服务器发出请求,然后运行时查询数据,模板填充,生成 html 内容并返回给客户端。
优点:
缺点:
CSR
CSR(Client Side Rendering) 是指客户端渲染。顾名思义,就是在渲染工作在客户端(浏览器)进行,而不是在服务器端进行。举个例子,我们平时用 vue,react 等框架开发的项目,都是先下载 html 文档(不是最终的完全的 html),然后下载 js 来执行渲染出页面结果。 以 react 为例,客户端渲染初始化的 html 一般如下
<!DOCTYPE html> <html lang="en"> <head> <title data-react-helmet="true">react app</title> <noscript> </noscript> </head> <body> <noscript> You need to enable JavaScript to run this app. </noscript> <div id="root"></div> <script type="text/javascript" src="/static/js/bundle.js" defer=""></script> <script type="text/javascript" src="/static/js/main.chunk.js" defer=""></script> </body> </html>
可以看出当前页面除了 <div id="root"></div> 元素,没有其他的元素,然后通过加载 bundle.js , main.chunk.js 来执行渲染。整个渲染过程包括,生成 DOM 节点,注入样式,交互事件绑定,数据获取等等。
<div id="root"></div>
bundle.js
main.chunk.js
优点:
缺点:
SSG
SSG(Static Site Generation) 是静态站点生成,解析是在构建时执行的,当发出请求时,html 将静态存储,直接发送回客户端,相当于一个静态资源。SSG 这种渲染模式采取了 CSR 和 SSR 的共同优点,它不需要开发者介入服务器操作,开发者只需要准备 cdn 或者其他静态网页托管服务器,prerender 出静态资源这一步将在构建时就已经做了,呈现在用户眼前的虽然不是实时变更的,但是也保留了 CSR 和 SSR 的精髓,一定程度上有了平衡。但是因为 prerender 的缘故,它和 SSR 的大致工作方式会相似一点。
协商缓存一般可在服务端通过设置 Last-Modified、ETag 等 ResponseHeader 实现。(304 状态码,表示资源未发生变更,可使用浏览器缓存。)
强缓存一般可在服务端通过设置 Cache-Control:max-age、Expires 等 ResponseHeader 实现。
设置强缓存后,Network 大致变成了这样:
From DiskCache:从硬盘中读取。 From MemoryCache:从内存中读取,速度最快。
From DiskCache:从硬盘中读取。
From MemoryCache:从内存中读取,速度最快。
nuxt.config.js by fileNames 选项中更改此设置。
默认情况下为:
{ app: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js', chunk: ({ isDev }) => isDev ? '[name].js' : '[contenthash].js', css: ({ isDev }) => isDev ? '[name].css' : '[contenthash].css', img: ({ isDev }) => isDev ? '[path][name].[ext]' : 'img/[contenthash:7].[ext]', font: ({ isDev }) => isDev ? '[path][name].[ext]' : 'fonts/[contenthash:7].[ext]', video: ({ isDev }) => isDev ? '[path][name].[ext]' : 'videos/[contenthash:7].[ext]' }
content-hash,与 hash、chunkhash 的区别:
publicPath: webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。
import webpack from "webpack"; // 资源路径前缀,生产环境使用cdn域名 const ASSET_PATH = process.env.PATH_TYPE !== "production" ? "/_nuxt/" : `//expample.cdn.cn`; export default { output: { publicPath: ASSET_PATH, }, plugins: [ // 该插件帮助我们安心地使用环境变量 new webpack.DefinePlugin({ "process.env.ASSET_PATH": JSON.stringify(ASSET_PATH), }), ], };
项目形态:SSR、CSR、SSG
SSR
SSR(Server Side Render) 是指服务端渲染,在我们 web 较早的时候,开发者喜欢使用 jsp、php 或者其他模板渲染引擎来构造一个应用,当客户端向服务器发出请求,然后运行时查询数据,模板填充,生成 html 内容并返回给客户端。
优点:
缺点:
CSR
CSR(Client Side Rendering) 是指客户端渲染。顾名思义,就是在渲染工作在客户端(浏览器)进行,而不是在服务器端进行。举个例子,我们平时用 vue,react 等框架开发的项目,都是先下载 html 文档(不是最终的完全的 html),然后下载 js 来执行渲染出页面结果。 以 react 为例,客户端渲染初始化的 html 一般如下
可以看出当前页面除了
<div id="root"></div>
元素,没有其他的元素,然后通过加载bundle.js
,main.chunk.js
来执行渲染。整个渲染过程包括,生成 DOM 节点,注入样式,交互事件绑定,数据获取等等。优点:
缺点:
SSG
SSG(Static Site Generation) 是静态站点生成,解析是在构建时执行的,当发出请求时,html 将静态存储,直接发送回客户端,相当于一个静态资源。SSG 这种渲染模式采取了 CSR 和 SSR 的共同优点,它不需要开发者介入服务器操作,开发者只需要准备 cdn 或者其他静态网页托管服务器,prerender 出静态资源这一步将在构建时就已经做了,呈现在用户眼前的虽然不是实时变更的,但是也保留了 CSR 和 SSR 的精髓,一定程度上有了平衡。但是因为 prerender 的缘故,它和 SSR 的大致工作方式会相似一点。
优点:
缺点:
静态资源组织:http 缓存、CDN
协商缓存一般可在服务端通过设置 Last-Modified、ETag 等 ResponseHeader 实现。(304 状态码,表示资源未发生变更,可使用浏览器缓存。)
强缓存一般可在服务端通过设置 Cache-Control:max-age、Expires 等 ResponseHeader 实现。
设置强缓存后,Network 大致变成了这样:
nuxt.config.js by fileNames 选项中更改此设置。
默认情况下为:
content-hash,与 hash、chunkhash 的区别:
publicPath: webpack 提供一个非常有用的配置,该配置能帮助你为项目中的所有资源指定一个基础路径。它被称为公共路径(publicPath)。
自定义 Jenkins 构建流程:shell 脚本
参考