vue后台项目中遇到的技术难点以及解决方案

这部分旨在尽可能减少http请求开销或响应时间，同时仍然满足您的要求。

CDN

将第三方类库放置在CDN 上可以显着减少生产中的项目大小。此外，CDN可以实时集成网络流量、每个节点的连接性、负载状态、到用户的距离和响应时间等综合信息。用户的请求被重定向到离用户最近的服务节点。

另外，CDN和服务器域名通常不相同，这减少了对同一域名同时http请求的数量限制，有效分流并减少发送冗余cookie（静态资源）。 CDN上的请求不需要包含cookie）

一般来说，使用CDN 可以提高项目中发送静态文件的速度。 vue-cli3允许您使用externals配置项在本地引用第三方类库引用地址。指定CDN地址。

externals 仅适用于ES 模块的默认导入

这里，启用CDN之前除了使用环境变量来确定生产环境外，还需要将CDN域名插入到index.html中，所以我们使用html-webpack-plugin编写脚本根据标签动态插入。同时加上cdn域名，在index.html中通过模板语法声明循环数组和插入元素。

打包前的index.html:

打包后的index.html:

可以看到，通过这个插件，可以在打包好的index.html中动态插入一个CDN域名。

另外需要注意的是externals对象的属性引入的是包的名称，属性值为对应的全局变量名（CDN引入的类库文件会自动放在window对象下）。 mount 必须在相应CDN 的源代码中找到。另外，如果您在导入Webpack 外部时遇到困难，请参考此博客。

我们建议尽可能将其放在贵公司的专用CDN 上。我们不建议使用公共CDN，因为它们容易挂起。生产环境必须稳定。

合理的缓存策略

对第三方库或者长时间不变化的静态资源设置强缓存，将max-age设置很长的时间，然后在访问路径上添加一个hash，直到hash值发生变化为止。最新的缓存。资源（vue-cli3是自动构建的，但是自己构建的Webpack脚手架需要自己设置contentHash、chunkHash）

CDN的缓存策略意味着max-age值太大，下次访问只会读取本地磁盘/内存上缓存的资源：

对于Index.html和一些图片等多媒体资源，选择协商缓存（max-age=0、Last-Modified、ETag）以保证服务器返回最新的资源即可。

良好的缓存策略可以帮助减少服务器负载并显着改善用户体验。

压缩包

启用文件的gzip 压缩是一个不错的选择。通常，当您启用gzip压缩时，如果您的项目使用nginx作为Web服务器，则只需在您的nginx配置文件中配置相应的gzip即可。在静态资源服务器上启用gzip 压缩的选项

#打开和关闭gzip模式

古兹彭。

#gizp压缩起点，大于1k的文件将被压缩

gzip_min_length1k；

#gzip 压缩级别(1-9)。数字越高，压缩比越好，所需的CPU 时间也越多。

gzip_comp_level6；

#要压缩的文件类型。

gzip_typestext/plainapplication/javascriptapplication/x-javascripttext/cssapplication/xmltext/javascript；

对于#nginx静态文件处理模块，启用后会寻找.gz结尾的文件，以避免压缩占用CPU，如果没有找到则不进行压缩。

gzip_静态

#httpheader是否添加Vary:Accept-Encoding，建议开启

gzip_varion；

# 设置gzip压缩的HTTP协议版本

gzip_http_version1.1；

不过，我们这里说的是前端输出一个gzip文件，并使用compression-webpack-plugin让Webpack在打包时输出带有.gz后缀的压缩文件就可以了。

这样你就已经可以得到gzip文件了，而无需服务器主动压缩它。这一行在上面的nginx配置项中。

对于#nginx静态文件处理模块，启用后会寻找.gz结尾的文件，以避免压缩占用CPU，如果没有找到则不进行压缩。

gzip_静态

只要把.gz文件放在服务器上，启动gzip_static，服务器在流量大的时候就可以先返回.gz文件，减轻服务器的一些负载，换取空间。时间（.gz 文件占用额外的服务器空间）

资源嗅探

对于现代浏览器，您可以将preload、prefetch 和dns-prefetch 属性添加到链接标记中。

preload

对于SPA 应用程序，只有在浏览器解析脚本后才会生成DOM 节点。如果您的项目不使用服务器端渲染并且需要加载耗时的首屏图像，您可以考虑放置此首屏图像。如果您将其放在preload 标记中并允许浏览器提前请求并加载它，则图像将在脚本运行后立即加载（否则脚本将在后台请求图像之前加载它）（您必须等待）。让它运行）。 ）

另外，使用preload在首屏预加载所需的CSS样式也是一个不错的选择。类似的库也很重要。

未使用预载

使用预载

通过瀑布图我们可以看到，这张WebP图片需要等到脚本加载完毕，如果图片很大的话，再返回请求。

您的项目可以使用多个预加载的Webpack 插件来轻松地将预加载的资源标签插入到打包的index.html 中。有兴趣的朋友可以尝试搜索相关插件。

prefetch

预取允许浏览器预加载下一页可能需要的资源。默认情况下，vue-cli3 为所有延迟加载的路由添加了prefetch 属性。这使得您访问的页面加载速度更快。延迟加载路线的速度。

preload 和prefetch 的区别在于preload 资源是与页面所需的静态资源并行加载的，而prefetch 则是等到浏览器加载完所需的资源后，在空闲的时候将其标记为prefetch ，才加载原本需要的资源。创建的。

dns-prefetch

dns-prefetch 允许浏览器预先解析域名，当静态资源和后端接口不在同一服务器上时，允许后端感知的域名命名。将dns-prefetch 属性添加到链接标记。

京东首页也采用了DNS预取技术

http2

自2015 年http2 推出以来，已经过去四年了。目前，http2在国内的覆盖率超过50%，通过http2帧传输可以显着降低http(s)请求的开销。

比较http2和http1.1的性能差异

如果您的系统首屏有大量静态资源需要同时加载，但浏览器对同一域名的TCP 连接数有限制（Chrome 为6），则TCP 连接数指定如果超出给定的数量，则必须等到收到上一个请求为止。只有得到响应后才能继续发送，但http2在某些网络较差的环境下可以无限制地通过单个TCP连接同时发送多个请求。开启http2时性能提升尤其明显。

我们强烈建议在支持https 协议的服务器上使用http2 协议。您可以通过Web 服务器Nginx 进行配置，或者让您的服务器直接支持http2。

在nginx 中启用http2 非常简单。只需在nginx.conf中原监听端口后面添加http2即可。前提条件是nginx版本不能低于1.95并且启用了https。

听443sslhttp2；

通过网络中的协议，您可以查看当前资源正在通过哪个版本的http 协议发送。

h2代表http2

构建相关

====

在构建方面，通过构建工具的简化配置，您可以减少生产中的代码大小、打包时间和页面加载时间。

路由延迟加载

传统的路由组件通过导入静态打包到项目中。这样做的缺点是所有页面组件都打包到同一个脚本文件中，这会加载过多的代码并在生产中的首屏上导致明显的问题。 （白屏）

通过import()，当URL 匹配相应路径时，ES6 模块会被动态加载，显着减少首屏代码量。将动态加载的页面组件拆分为单独的chunk.js 文件。

当然，延迟加载也有其缺点。这意味着将添加一个额外的http请求。如果你的项目很小，可以考虑不使用路由进行延迟加载。

预渲染

这会导致白屏时间，因为浏览器在渲染页面之前必须加载并解析相应的html、css 和js 文件。如何尽可能减少白屏对用户的影响？我当前的选择是在HTML 模板中插入加载动画。这里以D2-Admin中的加载动画为例。

%=VUE_APP_TITLE%

不幸的是，如果没有JavaScript 支持，D2Admin 将无法正常工作。请在浏览器中启用JavaScript 以继续。

图像

类=“d2-home__loading”

src=“./image/loading/loading-spin.svg”

alt=“正在加载”

加载资源

资源的初始加载可能需要一些时间。请稍等。

是

href=\”https://github.com/d2-projects/d2-admin\”

目标=“_空白”

https://github.com/d2-projects/d2-admin

打包完成后，页面脚本将插入到index.html下面。当用户访问该项目时，脚本还没有执行，而是直接插入到html中，因此显示加载动画。在脚本运行之前，Vue 会生成新的应用程序节点并删除同名的旧节点。这有效地过渡了白屏时间。

加载动画只是一个让用户知道程序正在启动的效果。这只是一个静态页面，没有任何功能。

另外，预渲染还可以使用服务器端渲染（SSR）通过后端输出主页模板。您还可以使用骨架屏解决方案，我在这里不知道。如果您有兴趣，请尝试一下。就这样了。

升级到最新的Webpack版本

相比webpack3，webpack4在打包优化方面的性能提升还是比较明显的。如果您觉得配置脚手架更复杂，您可以使用vue-cli3 构建项目，它也是基于webpack4 的。

DLL插件

如果您没有稳定的CDN，您还可以使用Webpack 插件DllPlugin 将您的类库与业务代码分离。作为一般规则，如果您的业务代码依赖于它们，请预先打包您的类库文件并创建关联表。对于第三方类库，直接到关联表中检索打包的类库文件。这样做的好处是，业务代码经常需要打包上线，而第三方类库本质上是不变的，所以每次打包完成后可以跳过这些类库文件，减少不必要的重复打包。

DllPlugin是webpack的内置插件，所以你不需要安装它。但是，要将打包的index.html注入到这些打包的第三方库中，您必须安装add-asset-html-webpack。 -plugin 添加插件。

如果需要向Index.html中注入多个类库，则需要多次实例化add-asset-html-webpack-plugin。这里我们使用nodejs的fs模块根据其类来遍历DllPlugin的打包目录。库的数量决定了您需要生成的实例数量。检查底部的链接以获取特定配置项。

合理使用第三方库

如果您的项目有日期操作要求，您还可以将注意力从一个时刻转移到另一个时刻，而不是大块时刻。 days 和moment 的API 是完全一样的，中文文档在这里：也是比较友好的。

另外，对于像lodash这样的库，如果您只需要部分功能，则只需部署该部分，因此Webpack只会在treeshake之后将这部分代码部署到生产环境中。

UI库（element-ui）的打包体积也相当大。官方文档中也有详细的教程。

element-ui 的压缩比Vue 高10 倍

常用于创建文件别名的路径

为常用的模块路径创建别名是一个不错的选择。项目越大，好处越明显。

vue-cli3的配置和使用（Webpack链调用文档）

使用可视化工具分析封装模块的体积

webpack-bundle-analyzer 插件可以让你更直观地分析每次打包后打包模块的体积，并对较大的模块进行优化。

这是优化前每个模块的大小：

由于业务需要，我们在前端引入了两个包，xlsx和pdf.js，但通过可视化工具我们发现它们占据了项目的一半。而且，要素和时刻也非常大。

通过将这些类库放在CDN上或者使用dllPlugin将类库和业务文件分开，优化后用可视化工具确认的各个模块的体积明显增加了。

静态资源优化

======

这部分的目的是为了减少一些图片资源请求的影响。

图像延迟加载

如果你的系统是一个面向显示的项目，需要向用户显示大量的图片，那么你可能需要考虑是否启用图片的延迟加载。无需加载不在用户图像中的图像。图片延迟加载可以先将图片加载到统一图片中，然后将实际图片地址替换为用户视野范围内的图片，同时减少HTTP请求。减少开销，避免显示图像引起的屏幕抖动，提高用户体验。

这里有两个延迟加载图像的想法。这两种解决方案最终都是用实际图像替换占位符图像，设置存储实际图像地址的自定义属性src，并将占位符图像地址存储在src 中。

getBoundingClientRect

DOM 元素包含一个getBoundingClientRect 方法，该方法返回与当前DOM 节点关联的CSS 边界集合。

它有一个top 属性，表示当前DOM 节点距浏览器窗口顶部的高度。它只是判断top值是否小于当前浏览器窗口高度（window.innerHeight）。如果小于当前浏览器窗口高度，则表示已进入用户视野，将被实际图像替换。

此外，使用getBoundingClientRect 延迟加载图像时需要记住三件事。

最后

经过4次技术面试和1次HR面试，面试也是一个学习和测试自己的过程，面试前我复习了一周左右，记下了自己之前的代码。面试的时候，我复习了之前leetcode和健智的offer，也复习了牛客网的一些面试。就这样，我们来写代码吧~

希望大家也能收到各大厂商的报价。

由于篇幅有限，仅展示部分内容

以上#vue后端项目中遇到的技术问题及解决方案仅供大家参考。相关信息请参见官方公告。