DAY8----Vue性能优化篇（必记）

1.编码优化：多拆分组件，提高组件的复用性，路由合理使用懒加载

2.加载优化：按需加载，图片/内容懒加载

3.SEO优化：预渲染  和ssr（服务端渲染）

通俗来理解：

**预渲染(Pre-rendering)**就像是提前做好一个网页的"样板"。在构建网站的时候,预渲染工具会先把网页的内容全部生成好,变成一个个静态的 HTML 文件。这些 HTML 文件就像是"样板",可以直接放到服务器上供用户访问。

当用户访问这个网站时,浏览器就可以直接从服务器上获取这些预先生成好的 HTML 文件,不需要再重新渲染一遍。这样可以大大提高网站的加载速度,因为不需要等待服务器动态生成页面内容。

另外,预渲染生成的 HTML 内容也更容易被搜索引擎抓取和理解,有利于 SEO。而且对于不支持 JavaScript 的设备或浏览器来说,也可以正常访问和浏览网站。

**服务端渲染(SSR)**则更像是在用户每次访问时,服务器都要重新"现场制作"一个网页。当用户访问网站时,服务器会根据用户的请求,动态生成对应的 HTML 内容,然后再返回给浏览器。

这样做的好处是可以更灵活地更新网页内容,不需要重新构建整个网站。但缺点是首次加载速度会相对较慢,因为需要等待服务器动态渲染页面。同时,服务器负载也会相对较高。

总的来说,预渲染适合于内容相对静态的网站,而服务端渲染则更适合于需要频繁更新内容的动态网站。

对于预渲染:

• 预渲染是在应用构建时(比如npm run build)就把页面渲染好,生成静态的HTML文件。
• 这些HTML文件会被部署到服务器上,供用户访问。
• 当你需要更改预渲染的内容时,比如修改了页面上的某些文字或图片,
• 你就需要重新运行构建命令(npm run build),生成新的HTML文件。
• 然后你需要将这些新的HTML文件部署到服务器上,替换掉旧的文件。
• 这就是为什么说预渲染需要"重新部署整个应用"。因为你需要重新构建整个应用,然后部署新的文件。

而对于 SSR:

• SSR 是在用户访问时,由服务器动态地渲染HTML页面,然后返回给用户。
• 当你需要更改 SSR 的内容时,比如修改了某个组件的代码,
• 你只需要更新服务器上的这个组件代码,无需重新部署整个应用。
• 因为服务器会在每次用户访问时,动态地渲染最新的HTML内容。

4.打包优化：CDN（相当于最近的包的仓库）形式加载，多线程打包。

5.用户体验：骨架屏，当内容没加载出来时，先显示出大致轮廓。