一、为什么要用CDN加速？
通过压缩代码的手段可减小网络传输的大小，但实际上最影响用户体验的还是网页首次打开时的加载等
待，其根本原因是网络传输过程耗时较大。
1、CDN（内容分发网络）的作用：
加速网络传输，通过将资源部署到世界各地，使用户在访问时按照就近原则从离其最近的服务
器获取资源来加快资源的获取速度。
原理：
CDN其实是通过优化物理链路层传输过程中的光速有限、丢包等问题来提升网速的，
2、接入CDN
要为网站接入CDN，需要将网页的静态资源上传到CDN服务上，在服务这些静态资源时需要通
过CDN服务提供的URL地址去访问。
3、用Webpack实现CDN的接入
构建需要实现以下几点：
a. 静态资源的导入URL需要变成指向CDN服务的绝对路径的URL，而不是相对于HTML文件
的URL。
b. 静态资源的文件名需要带上由文件内容算出来的Hash值，以防止被缓存。
c. 将不同类型的资源放到不同域名的CDN服务上，以防资源的并行加载被阻塞。
要实现以上要求的最终Webpack配置：
const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const {WebPlugin} = require('web-webpack-plugin')
module.exports = {
// 省略entry配置…
output: {
// 为输出的Javascript文件名加上Hash值
filname: '[name]_[chunhash:8].js',
path: path.resolve(_dirname, './dist'),
// 指定存放Javascript文件的CDN目录URL
publicPath: '//js.cdn.com/id/',
},
module: {
relus: [
// 增加对CSS文件从支持
test: /\.css/,
// 提取chunk中的CSS代码到单独的文件中
use: ExtractTextPlugin.extract({
// 压缩CSS代码
use: ['css-loader?minimize'],
// 指定存放CSS中导入的资源（例如图片）的CDN目录URL
publicPath: '//img.cdn.com/id/'
}),
},
// 增加对PNG文件的支持
test: /\.png/,
// 为输出的PNG文件名加上Hash值
use: ['file-loader?name=[name]_[hash:8].[ext]'],
},
// 省略其他Loader配置…
},
plugins: [
// 使用WebPlugin自动生成HTML
new WebPlugin({
// HTML模板文件所在的文件路径
template: './template.html',
// 输出的HTML的文件名
filename: 'index.html',
// 指定存放CSS文件的CDN目录URL
stylePublicPath: '//css.cdn.com/id/',
}),
new ExtractTextPlugin({
// 为输出的CSS文件名加上Hash值
filename: '[name]_[contenthash:8].css',
}),
// 省略代码压缩插件配置…
};
注：核心部分是通过publicPath参数设置存放静态资源的CDN目录URL。
为了让不同类型的资源输出到不同的CDN,需进行以下设置：
a. 在output.publicPath中设置Javascript的地址
b. 在css-loader.publicPath中设置被css导入的资源的地址。
c. 在WebPlugin.stylePublicPath中设置CSS文件的地址。
注：设置好publicPath后，WebPlugin在生成HTML文件并将css-loader转换CSS代码时，会考
虑到配置中的publicPath，用对应的线上地址替换原来的相对地址。
原文链接：https://blog.csdn.net/weixin_41319237/article/details/114936912?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522165918418816782395376867%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fblog.%2522%257D&request_id=165918418816782395376867&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~blog~first_rank_ecpm_v1~times_rank-13-114936912-null-null.nonecase&utm_term=cdn%E5%8A%A0%E9%80%9F
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/485
