网站打开超30秒，我被群友喷惨了

　　网站打开超30秒，我被群友喷惨了

　　回复"面试笔记"【点击】获取小龙秋招面试笔记，已助力 N 名同学斩获offer~，速来。

　　《》系列目前已经连载18篇了，据说看了这个系列的朋友都拿到了大厂offer~（）

　　大家好，我是小龙。

　　在大厂面试中，关于实际项目网站的优化可能也是经常被问。为了结合具体实际案例进行讲解，分享蘑菇博客网站访问过慢是怎样处理的？

　　最近，BootCDN可谓是问题多多，这不这两天加载CSS、JS文件就需要花费20秒

　　直接导致蘑菇打开缓慢，导致群友无法愉快的进行网上冲浪，疯狂在蘑菇圈进行吐槽~

　　蘑菇圈炸锅了

　　目前想到了两种解决方法

　　本地CDN

　　虽然上次已经对CDN进行了一些改造，不过改的不彻底，这次打算把所有的CSS和JS都拉到本地

　　BootCDN

　　首先，分别找出index.html下的CDN域名

　　https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/theme-chalk/index.css<br />https://cdn.bootcdn.net/ajax/libs/vue/2.5.17/vue.js<br />https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.6/index.js<br />https://cdn.bootcdn.net/ajax/libs/ckeditor/4.15.1/ckeditor.js<br />https://cdn.bootcdn.net/ajax/libs/showdown/1.9.1/showdown.min.js<br />https://cdn.bootcdn.net/ajax/libs/turndown/6.0.0/turndown.min.js<br />https://cdn.jsdelivr.net/npm/vditor/dist/index.css<br />https://cdn.jsdelivr.net/npm/vditor/dist/index.min.js<br />https://cdn.bootcdn.net/ajax/libs/social-share.js/1.0.9/css/share.min.css<br />https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.0-alpha1/styles/a11y-dark.min.css<br />https://cdn.bootcdn.net/ajax/libs/highlight.js/11.0.0-alpha1/highlight.min.js<br />...<br />

　　然后在浏览器中打开，复制其内容

　　打开浏览器复制内容

　　在static文件夹中，创建cdn文件夹，然后把每个CDN文件内容，分别保存到该文件夹中

　　创建static文件夹

　　同时由于element ui的css文件，还会引入两个相对目录的文件

　　引入icon库

　　如果没有引入的话，会无法正常显示图标库

　　icon显示失败

　　这个两个文件在那里可以找到呢？这个时候就可以打开element ui的Github地址了

　　https://github.com/ElementUI/theme-chalk<br />

　　然后进入到theme-chalk/lib/fonts目录下，下载下面两个文件

　　从Element下载

　　然后在static/cdn中，创建fonts文件夹，把两个文件拷贝进行即可

　　导入fonts

　　在所有操作完成后，然后替换成相对路径即可~

　　替换成相对本地路径

　　这个时候，网站就会应用本地的CSS和JS文件了，再也不怕网站宕机打不开了

　　本地成功运行七牛云搭建CDN

　　上面的方法，虽然解决了CDN宕机导致网站打不开的问题，但是因为样式文件存储在自己的服务器上，而且这几个文件就有2M了

　　静态文件大小

　　有不少的蘑菇小伙伴的带宽只有1M的话，那么可能光下载这几个文件就要花费近20秒了！

　　那这样的话，我们这次改造就没有什么意义了？

　　本着白嫖的原则，让小伙伴们少花钱的方式，陌溪想到了通过白嫖七牛云的免费10G存储空间，来搭建蘑菇的CDN

　　七牛云地址：

　　白嫖七牛云

　　注册完成后，应该需要进行实名认证，通过后就可以开始使用免费的存储空间了~

　　首先需要选择对象存储，然后选择空间管理

　　免费的对象存储

　　创建一个属于自己的空间，填写空间名称、存储区域 和 访问控制（记得选公开）

　　创建空间

　　填写完成后，就可以开始上传文件了。在上传文件前，如果有备案的域名的话，也可以绑定自定义的域名（不配置可以跳过）

　　配置域名

　　然后选择绑定域名，然后填写自己的二级域名，比如蘑菇的是：，然后点击创建

　　绑定域名

　　创建成功后，我们需要去配置域名解析，首先需要复制这个CNAME的值

　　复制CNAME

　　然后到阿里云的域名，新增一条解析记录

　　新增解析记录

　　选择类型为CNAME，即指向另外一个域名

　　记录解析成功

　　创建成功后，回到七牛云，等待一段时间后，如果显示成功，即表示域名配置成功

　　配置成功

　　然后在下方的外链域名，就会显示自己刚刚绑定的域名了

　　当然如果没有域名的话，也可以使用下方默认的域名，不过默认的域名只有一个月的有效期，失效后需要进行修改，这个会有些麻烦

　　切换域名

　　上述操作都完成后，我们可以创建cdn文件夹，然后把刚刚的static/cdn文件都上传到cdn文件夹里

　　上传CDN文件

　　文件文件上传完成后，点击查看详情页，就可以看到我们在七牛云下的地址了，复制到这个文件

　　复制CDN地址

　　最后把原来路径，替换成即可，自建的蘑菇cdn大功告成~

　　替换成蘑菇CDN

　　最后重启，完美运行prefect~

　　完美运行

　　最后部署上线，通过 F12再看看每个js文件加载的速度，只用20 ms就加载完成一个，打开速度很快~

　　最终加载速度

　　好了，本期的蘑菇CDN改造就到这里了

　　我是小龙，我们下期再见~

　　往期推荐---END---

　　求一键三连：希望转发、在看、分享给更多同学哟~