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

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

　　陌溪的学习笔记：

　　大家好，我是陌溪

　　最近，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 改造就到这里了

　　我是陌溪，我们下期再见~

　　往期推荐

　　博主就职于字节跳动商业化部门，一直在维护校招笔记仓库LearningNote「在Gitee上已有4.5kstar，仓库地址」，公众号上的文章也会在此同步更新，欢迎各位小伙伴一起交流学习，回复「PDF」获取PDF笔记。

　　同时，想要丰富项目经验的小伙伴，可以参考我维护的开源微服务博客项目：蘑菇博客「Gitee官方推荐项目，博客类搜索排名第一，在Gitee已有4.1Kstar，仓库地址：」。

　　本公众号申请较晚，暂时没有开通留言功能，欢迎小伙伴们添加我的私人微信coder_moxi【备注：加群】，我将邀请你加入到蘑菇博客交流群中，欢迎小伙伴们找陌溪一块聊天唠嗑，共同学习进步。最后，如果你觉得本文对你有所帮助，麻烦小伙伴们动动手指给文章点个「赞」和「在看」，非常感谢大家的支持。

　　快来找陌溪唠嗑吧

　　

　　点个在看你最好看