学习笔记(8)

学习笔记(8)

本期主要是对一些概念的扫盲：其中包含做业务过程中对一些概念的介绍；还有因为长期不用导致的一些前端性能优化方案的遗忘知识点。

CDN

是什么

CDN的全称是Content Delivery Network，即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络，依靠部署在各地的边缘服务器，通过中心平台的负载均衡、内容分发、调度等功能模块，使用户就近获取所需内容，降低网络拥塞，提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。

简单问题

//cdn.com/id/app_a6976b6d.css 这样写的好处？

URL省略了前面的协议类型，这样做的好处是访问这些资源的适合会自动根据当前HTML的URL采用什么协议去决定用什么协议

CDN服务一般会给资源开启多长时间的缓存

• 针对HTML文件：不开启缓存，HTML文件不会放在CDN服务上，放在自己的服务器上，同时关闭自己服务器的缓存，自己服务器只提供HTML文件和接口
• 静态js css 图片，开启CDN和缓存放在CDN服务商去。同时每个文件名都是带有由文件内容生成的hash值，这样文件内容发生变化就会被重新下载不管缓存时间多长

如何配置CDN

下面讲一下webpack里面如何配置让把静态资源上传到CDN

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const {WebPlugin} = require('web-webpack-plugin');

module.exports = {
  // 省略 entry 配置...
  output: {
    // 给输出的 JavaScript 文件名称加上 Hash 值
    filename: '[name]_[chunkhash:8].js',
    path: path.resolve(__dirname, './dist'),
    // 指定存放 JavaScript 文件的 CDN 目录 URL
    publicPath: '//js.cdn.com/id/',
  },
  module: {
    rules: [
      {
        // 增加对 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`,
    }),
    // 省略代码压缩插件配置...
  ],
};

关键点：

• 静态资源的文件名需要带上文件内容算出来的hash值，避免被缓存如：

filename:'[name]_[chunkhash:8].js'

• 不同类型的资源放到不同域名的CDN服务上去，防止资源并行加载被阻塞。

output.publicPath: '//js.cdn.com/id/',
css-loader.publicPath: '//img.cdn.com/id/'
WebPlugin.stylePublicPath: '//css.cdn.com/id/',

sgm

sgm:service governance and monitoring 即服务监控与治理，是一套致力于分布式服务监控/跟踪/预警的综合服务治理解决方案，是实现全链路监控的基础。

电子承兑汇票