博客使用CDN加载静态资源

时间：2020年12月10号

参考：https://blog.csdn.net/CHEN741755613/article/details/107391906

::: theorem CDN
内容分发网络（英语：Content Delivery Network或Content Distribution Network，缩写：CDN）是指一种透过互联网互相连接的电脑网络系统，利用最靠近每位用户的服务器，更快、更可靠地将音乐、图片、视频、应用程序及其他文件发送给用户，来提供高性能、可扩展性及低成本的网络内容传递给用户。

来自 维基百科

前言

• 使用的CDN是JSDelivr，一款免费的CDN，可以加速NPM、Github内的文件
• 静态资源储存在GitHub上
• 博客中的js脚本和图片均使用CDN

使用CDN

仓库资源可以通过 https://cdn.jsdelivr.net/gh/billsaul/blog-static-files + 仓库文件路径 直接访问

默认是访问 master 分支下的资源，如果需要访问其他分支的资源，需要指定分支：

https://cdn.jsdelivr.net/gh/billsaul/blog-static-files/assets/img/favicon.ico

# gh-pages分支
https://cdn.jsdelivr.net/gh/billsaul/blog-static-files@gh-pages/assets/img/favicon.ico

配置Vuepress

在config.js中添加下面的代码。对于开发环境，还是继续使用本地文件；对于生产环境，则使用CDN资源。

const path = require('path')
module.exports = {
  …
  …
	configureWebpack: (config) => {
        	const NODE_ENV = process.env.NODE_ENV
        	//判断是否是生产环境
        	if (NODE_ENV === 'production') {
            	return {
                	output: {
                    	publicPath: 'https://cdn.jsdelivr.net/gh/billsaul/blog-static-files/'
                	},
                	resolve: {
                    	//配置路径别名
                    	alias: {
	                        'public': path.resolve(__dirname, './public')
	                    }
	                }
	            }
	        } else {
	            return {
	                resolve: {
	                    //配置路径别名
	                    alias: {
	                        'public': path.resolve(__dirname, './public')
	                    }
	                }
	            }
	        }
	    },
	}

此时我们 markdown 文件里面图片路径还是这样的

![图片](/assets/page-img/20201106/4.webp)

修改 markdown 文件图片地址，添加 Webpack 配置好的路径别名前缀

![图片](~public/assets/page-img/2020/20201106/4.webp)

这样打包后的博客使用的就是CDN资源了！