前端cdn优化

目录：

一、---------------------------cdn问答

1---------------------------什么是cdn？

2---------------------------为什么要使用cdn引入公共模块 ？

3---------------------------有cdn和没有cdn的区别是什么？

二、---------------------------关于缓存

三、---------------------------采用cdn引入公共组件的优点

四、---------------------------采用cdn引入公共组件的缺点

五、---------------------------在vue-cli2.x中的公共组件以cdn的方式引入

六、---------------------------在vue-cli3.x中的公共组件以cdn的方式引入

一：cdn的问答

8年前，还没有火车票代售点一说，12306.cn更是无从说起。那时候火车票还只能在火车站的售票大厅购买，而我所住的小县城并不通火车，火车票都要去市里的火车站购买，而从县城到市里，来回就是4个小时车程，简直就是浪费生命。后来就好了，小县城里出现了火车票代售点，可以直接在代售点购买火车，方便了不少，全市人民再也不用在一个点苦逼的排队买票了。技术来源于生活，如何将这种便利带入我们的项目中。

好了话不多说 上图

[图片上传失败...(image-593127-1639476511537)]

http缓存的介绍参考网址：<u>https://www.cnblogs.com/Leo_wl/p/5686610.html</u>，这里我们主要介绍cdn

1、什么是cdn？

CDN也叫内容分发网络，是一个经策略性部署的整体系统，包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。而其中呢，内容管理和全局的网络流量管理是CDN的核心所在。通过用户就进行和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务

[图片上传失败...(image-9bda6c-1639476511536)]

2、为什么要使用cdn引入公共模块 ？

客户端直接从源站点获取数据，当服务器访问量大时会影响访问速度，进而影响用户体验，且无法保证客户端与源站点间的距离足够短，并且适合传输数据。

3、有cdn和没有cdn的区别是什么？

A、没有cdn：

-->用户在浏览器访问栏中输入要访问的域名;

-->浏览器向DNS服务器请求对该域名的解析;

-->DNS服务器返回该域名的IP地址给浏览器;

-->浏览器使用该IP地址向服务器请求内容;

-->服务器将用户请求的内容返回给浏览器;

B、有cdn：

-->用户在浏览器中输入要访问的域名

-->浏览器向DNS服务器请求对域名进行解析。由于CDN对域名解析进行了调整，DNS服务器会最终 将域名的解析权交给CNAME指向的CDN专用DNS服务器

-->CDN的DNS服务器将CDN的负载均衡设备IP地址返回给用户

-->用户向CDN的负载均衡设备发起内容URL访问请求

-->CDN负载均衡设备会为用户选择一台合适的缓存服务器提供服务

Ps:选择的依据包括：根据用户IP地址，判断哪一台服务器距离用户最近；根据用户所请求的URL中携带的内容名称，判断哪一台服务器上有用户所需内容；查询各个服务器的负载情况，判断哪一台服务器的负载较小,基于以上这些依据的综合分析之后，负载均衡设置会把缓存服务器的IP地址返回给用户

-->用户向缓存服务器发出请求

-->缓存服务器响应用户请求，将用户所需内容传送到用户

-->如果这台缓存服务器上并没有用户想要的内容，而负载均衡设备依然将它分配给了用户，那么这台服 务器就要向它的上一级缓存服务器请求内容，直至追溯到网站的源服务器将内容拉取到本地

二、关于缓存

没有CDN：浏览器缓存

使用了CDN：浏览器缓存+CDN缓存

在用户第一次访问网站后，网站的一些静态资源如图片等就会被下载到本地，作为缓存，当用户第二次访问该网站的时候，浏览器就会从缓存中加载资源，不用向服务器请求资源，从而提高了网站的访问速度，而若使用了CDN，当浏览器本地缓存的资源过期之后，浏览器不是直接向源站点请求资源，而是向CDN边缘节点请求资源，CDN边缘节点中也存在缓存，若CDN中的缓存也过期，那就由CDN边缘节点向源站点发出回源请求来获取最新资源。

浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器，当强缓存没有命中的时候，浏览器一定会发送一个请求到服务器，服务器端依据资源的另外一些http header验证这个资源是否命中协商缓存，如果命中，服务器会将这个请求返回，但是不会返回这个资源的数据，而是告诉客户端可以直接从缓存中加载这个资源，于是浏览器还是从自己的缓存中加载资源，当协商缓存也没有命中的时候，浏览器直接从服务器加载资源数据

CDN节点缓存机制在不同服务商中是不同的，但一般都遵循HTTP协议，通过http响应头中的Cache-Control:max-age的字段来设置CDN节点文件缓存时间。当客户端向CDN节点请求数据时，CDN会判断缓存数据是否过期，若没有过期，则直接将缓存数据返回给客户端，否则就向源站点发出请求，从源站点拉取最新数据，更新本地缓存，并将最新数据返回给客户端。CDN服务商一般会提供基于文件后缀、目录多个维度来指定CDN缓存时间，为用户提供更精细化的缓存管理。CDN缓存时间会对“回源率”产生直接的影响，若CDN缓存时间短，则数据经常失效，导致频繁回源，增加了源站的负载，同时也增大了访问延时；若缓存时间长，数据更新时间慢，因此需要针对不同的业务需求来选择特定的数据缓存管理。

三、采用cdn引入公共组件的优点

1、****多域名加载资源

一般情况下，浏览器都会对单个域名下的并发请求数（文件加载）进行限制，通常最多有4个，那么第5个加载项将会被阻塞，直到前面的某一个文件加载完毕。

因为CDN文件是存放在不同区域（不同IP）的，所以对浏览器来说是可以同时加载页面所需的所有文件（远不止4个），从而提高页面加载速度。

2、文件可能已经被加载过并保存有缓存

一些通用的js库或者是css样式库，如jQuery，在网络中的使用是非常普遍的。当一个用户在浏览你的某一个网页的时候，很有可能他已经通过你网站使用的CDN访问过了其他的某一个网站，恰巧这个网站同样也使用了jQuery，那么此时用户浏览器已经缓存有该jQuery文件（同IP的同名文件如果有缓存，浏览器会直接使用缓存文件，不会再进行加载），所以就不会再加载一次了，从而间接的提高了网站的访问速度。

3、高效率

你的网站做的再NB也不会NB过百度NB过Google吧？一个好的CDNs会提供更高的效率，更低的网络延时和更小的丢包率。

4、分布式的数据中心

假如你的站点布置在北京，当一个香港或者更远的用户访问你的站点的时候，他的数据请求势必会很慢很慢。而CDNs则会让用户从离他最近的节点去加载所需的文件，所以加载速度提升就是理所当然的了。

5、内置版本控制

通常，对于CSS文件和JavaScript库来说都是有版本号的，你可以通过特定版本号从CDNs加载所需的文件，也可以使用latest加载最新版本（不推荐）。

6、使用情况分析

一般情况下CDNs提供商（如百度云加速）都会提供数据统计功能，可以了解更多关于用户访问自己网站的情况，可以根据统计数据对自己的站点适时适当的做出些许调整。

7、有效防止网站被攻击

一般情况下CDNs提供商也是会提供网站安全服务的。

四、采用cdn引入公共组件的缺点

硬核：必须依赖网络，如果没网，cdn的资源什么都回不来，可能导致页面崩塌。

五、在vue-cli2.x中的公共组件以cdn的方式引入

与其说是优化 Vue，不如说主要是在 webpack 打包的配置中做些文章，使得 Vue 编译后的文件尽可能的小。以下介绍自己在项目中进行优化的过程，其中的内容也许并不适合于每个项目，但整体思路是差不多的

1、定位问题

要想进行优化，首先我们得清楚问题所在。即：是哪些代码/依赖包导致最后的编译文件过大？

这里，我们需要使用 webpack-bundle-analyzer 工具。修改 package.json 文件，添加：

"analyze": "NODE_ENV=production npm_config_report=true npm run build"

[图片上传失败...(image-1e0abc-1639476511535)]

[图片上传失败...(image-ecccc2-1639476511535)]

Ps：vue-cli2.x脚手架中是默认有webpack-bundle-analyzer工具的，所以在这里我们只需要在 package.json中添加我们所需要的命令“analyz”。

注意：这里在添加命令“analyz的时候，"analyze": "NODE_ENV=production npm_config_report=true npm run build" 会报错：NODE_ENV不是本地命令，其实是因为使用NODE_ENV命令需要跨平台兼容，所以在此我们需要引入另外一个组件

"cross-env": "^5.2.0",

npm install cross-env -S

同事配置命令的时候："analyz": "cross-env NODE_ENV=production npm_config_report=true npm run build"

之后在命令行输入：npm run analyze

我们会在浏览器上看到我们项目所打的包的具体大小：

[图片上传失败...(image-aee065-1639476511535)]

好了，找到病根，接下来就是对症下药，下面我们一vue为例作为讲解：

首先，为了避免我们从新使用cdn引入进来的文件与我们下载的好的元组件内容不一致，我们需要将引入的cdn版本号统一：

[图片上传失败...(image-3fd320-1639476511535)]

之后在index.html中全局引入

[图片上传失败...(image-61d4a-1639476511535)]

接下来就是要让webpack打包时将这些已经使用cdn引入的公共组件排除在外，已达到给我们的版本包瘦身的效果。

在webpack中有一个配置：externals

externals 配置选项提供了「从输出的 bundle 中排除依赖」的方法。相反，所创建的 bundle 依赖于那些存在于用户环境(consumer's environment)中的依赖也会从externals的配置中找寻。

externals 详解：<u>https://www.tangshuang.net/3343.html</u> （非官方地址）

有了externals配置就好说了，我们在webpack.base.conf.js中配置：

[图片上传失败...(image-7d1402-1639476511535)]

之后再运行npm run analyze你会发现包变小了，之前vue所占的大小被甩掉了。

恭喜通关！就是这么简单^_

六、在vue-cli3.x中的公共组件以cdn的方式引入

首先还是定位问题：在vue-cli3.x中是没有默认安装webpack-bundle-analyzer工具的，所以

npm intall webpack-bundle-analyzer –save-dev

并在项目中新增vue.config.js文件,配置如下

[图片上传失败...(image-3e00b1-1639476511535)]

chainWebpack: config => {

config

.plugin('webpack-bundle-analyzer')

.use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)

}

之后运行命令：npm run serve；注意该方法会覆盖之前的npm run serve和npm run build 查看完毕之后如需还原，只需要将上边的配置注释即可！

之后同样是在index.html文件中全局引入cdn，注意版本号统一：

[图片上传失败...(image-7132ef-1639476511535)]

之后在vue.config.js配置文件中配置

[图片上传失败...(image-db46c8-1639476511535)]

configureWebpack: {

externals: {

vue: 'Vue'

}

},

好了恭喜你通关vue-cli3.x ^-

完！

后话：

更多vue-cli3.x配置参考！

const path = require('path');

const vConsolePlugin = require('vconsole-webpack-plugin'); // 引入 移动端模拟开发者工具 插件 （另：https://github.com/liriliri/eruda）

const CompressionPlugin = require('compression-webpack-plugin'); //Gzip

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; //Webpack包文件分析器

const baseUrl = process.env.NODE_ENV === "production" ? "/static/" : "/"; //font scss资源路径 不同环境切换控制

module.exports = {

//基本路径

baseUrl: './',

//输出文件目录

outputDir: 'dist',

// eslint-loader 是否在保存的时候检查

lintOnSave: true,

//放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录。

assetsDir: 'static',

//以多页模式构建应用程序。

pages: undefined,

//是否使用包含运行时编译器的 Vue 构建版本

runtimeCompiler: false,

//是否为 Babel 或 TypeScript 使用 thread-loader。该选项在系统的 CPU 有多于一个内核时自动启用，仅作用于生产构建，在适当的时候开启几个子进程去并发的执行压缩

parallel: require('os').cpus().length > 1,

//生产环境是否生成 sourceMap 文件，一般情况不建议打开

productionSourceMap: false,

// webpack配置

//对内部的 webpack 配置进行更细粒度的修改 https://github.com/neutrinojs/webpack-chain see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md

chainWebpack: config => {

/**

 * 删除懒加载模块的prefetch，降低带宽压力

 * https://cli.vuejs.org/zh/guide/html-and-static-assets.html#prefetch

 * 而且预渲染时生成的prefetch标签是modern版本的，低版本浏览器是不需要的

 */

//    config.plugins.delete('prefetch');

//    if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'

//    } else {// 为开发环境修改配置...

//    }

},

//调整 webpack 配置 https://cli.vuejs.org/zh/guide/webpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F

configureWebpack: config => {

//生产and测试环境

let pluginsPro = [

  new CompressionPlugin({ //文件开启Gzip，也可以通过服务端(如：nginx)(https://github.com/webpack-contrib/compression-webpack-plugin)

    filename: '[path].gz[query]',

    algorithm: 'gzip',

    test: new RegExp('\\.(' + ['js', 'css'].join('|') + ')$', ),

    threshold: 8192,

    minRatio: 0.8,

  }),

  //  Webpack包文件分析器(https://github.com/webpack-contrib/webpack-bundle-analyzer)

  new BundleAnalyzerPlugin(),

];

//开发环境

let pluginsDev = [

  //移动端模拟开发者工具(https://github.com/diamont1001/vconsole-webpack-plugin https://github.com/Tencent/vConsole)

  new vConsolePlugin({

    filter: [], // 需要过滤的入口文件

    enable: false // 发布代码前记得改回 false

  }),

];

if(process.env.NODE_ENV === 'production') { // 为生产环境修改配置...process.env.NODE_ENV !== 'development'

  config.plugins = [...config.plugins, ...pluginsPro];

} else {

  // 为开发环境修改配置...

  config.plugins = [...config.plugins, ...pluginsDev];

}

},

css: {

// 启用 CSS modules

modules: false,

// 是否使用css分离插件

extract: true,

// 开启 CSS source maps，一般不建议开启

sourceMap: false,

// css预设器配置项

loaderOptions: {

  sass: {

    //设置css中引用文件的路径，引入通用使用的scss文件（如包含的@mixin）

    data: `

    $baseUrl: "/";

  `

  }

}

},

// webpack-dev-server 相关配置 https://webpack.js.org/configuration/dev-server/

devServer: {

host: 'localhost',

// host: "0.0.0.0",

port: 8000, // 端口号

https: false, // https:{type:Boolean}

open: true, //配置自动启动浏览器 http://XXX.XXX.X.XX:7071/rest/XXX/

hotOnly: true, // 热更新

proxy: 'http://localhost:8000' // 配置跨域处理,只有一个代理

// proxy: { //配置自动启动浏览器

//  "/XX/*": {

//    target: "http://XXX.XXX.X.XX",

//    changeOrigin: true,

//    // ws: true,//websocket支持

//    secure: false

//  },

//  "/x/*": {

//    target: "http://XXX.XXX.X.XX",

//    changeOrigin: true,

//    // ws: true,//websocket支持

//    secure: false

//  },

// }

},

// 第三方插件配置 https://www.npmjs.com/package/vue-cli-plugin-style-resources-loader

pluginOptions: {

'style-resources-loader': {//https://github.com/yenshih/style-resources-loader

  preProcessor: 'scss',//声明类型

  'patterns': [

// path.resolve(__dirname, './src/assets/scss/_common.scss'),

  ],

// injector: 'append'

}

}

}

更多前端性能优化：<u>https://www.cnblogs.com/chris-oil/p/9122633.html</u>

关于缓存：<u>https://www.jianshu.com/p/f4dbaaebe902</u>

Vue层面的性能优化：<u>https://www.haorooms.com/post/vue_webpack_youhua</u>