前端工程CDN部署

大型的web引用对于速度的追求不仅仅局限于浏览器缓存，浏览器缓存只是为了提升二次访问的速度。对于首次访问我们需要从网络层面进行。最常见的手段就是CDN（Content Delivery Network，内容分发网络）加速，通过将静态资源缓存到距离用户很近的相同网络运营商的CDN节点上，不但可以提升用户访问的速度，还能节省服务器的带宽消耗。降低负载。

不同地区的用户访会访问到离自己最近的相同网络线路上的CDN节点，当请求达到CDN节点后，节点会判断自己的内容缓存是否有效。如果有效则立即响应缓存内容给用户，从而加快响应速度。如果CDN节点的缓存失效，他会根据服务器配置去我们的内容源服务器获最新的资源响应给用户。并将内容缓存下来以便给后续访问的用户。因此，一个地区只要有一个用户先加载资源在CDN中建立了缓存。该地区的其他后续用户都能因此受益

为了使用CDN网络缓存，静态资源部署的时候要做两项改变：

• 将静态资源部署到不同那个网络线路的服务器中，以加速对应网络中CDN节点无缓存是的溯源速度
• 加载静态资源时使用与页面不同的域名，一方面是便于接入为CDN而设置的智能DNS解析服务。另一方面因为静态资源和主页不同于。这样加载静态资源的HTTP请求就不会带上主页面中的Cookie等数据。较少了数据传输量。又进一步加快网络访问。

项目部署CDN

创建桶，自定义CDN域名什么的巴拉巴拉…不是重点，自行创建吧。

npm i cos-webpack
或者
npm i tencent-cloud-webpack-plugin

// 引入
const CosPlugin = require('cos-webpack')

// 这里用项目名加上时间戳用来在腾讯云中区分标识
const fileName = 'projectName/' + new Date().getTime()

const cosPlugin = new CosPlugin({
    secretId: xxx,
    secretKey: xxx,
    bucket: xxx,
    region: xxx,
    path: fileName
});

module.exports = {
 output: {
    publicPath: IS_PROD ? tencent.cdnPath + fileName + '/dist' : '/', // tencent.cdnPath 要指向 COS（或自定义的）域名地址
    outputDir: 'dist',
    assetsDir: 'static',
 },
 plugins: [
   cosPlugin
 ]
}

build之后，查看打包的文件是否上传到你指定的cos文件中，然后将本地打包的文件发布到你自己的服务器。这个时候使用域名访问，可以在netWork中看到，所有的链接都走得是CDN链接了。

配置项

• secretId COS SecretId
• secretKey COS SecretKey
• bucket COS 存储对象名称，格式为对象名称加应用 ID，如：bucket-1250000000
• region COS 存储地域，参见官方文档
• path 存储路径， 默认为 [hash]，也可以指定 hash 长度，如: [hash:8]
• exclude 可选，排除特定文件，正则表达式，如: /index.html$/
• include 可选，指定要上传的文件，正则表达式，如: /app.js$/
• batch 可选，批量上传文件并发数，默认 20

在iOS中有H5加载慢的问题，可以尝试Nginx开启OCSP stapling。我目前还没开启。不知道会不会有什么问题。后续如果开启了再补充。如果哪位大佬对这块比较熟悉，大家可以交流交流

感谢下面大佬
参考文章：https://blog.csdn.net/sky_beyond/article/details/54092267

项目部署超级优化方案：https://blog.csdn.net/sky_beyond/article/details/54091870