什么是CDN

CDN 全称是 Content Delivery Network ，即内容分发网络，是由分布在不同区域的边缘节点服务器群组成的分布式网络。简单的说，CDN 就是将源站的资源缓存到位于全球各地的 CDN 节点上，用户请求资源时，返回最近节点上缓存的资源，而不需要每个用户的请求都从源站获取，从而避免网络拥塞、缓解源站压力，保证用户访问资源的速度和体验。

Webpack性能优化之CDN加速 - 图1

CND加速主要是加速静态资源，如网站上面上传的图片、音视频、流媒体等，以及引入的一些Js、css等文件。

Webpack 中实现CDN

在 Webpack 中接入CDN，需要实现以下几点：

  • 导入静态资源的 URL 需要变成指向 CDN 服务器的绝对路径的 URL
  • 静态资源的文件名称需要带上有文件内容算出来的 Hash 值，以防止被缓存
  • 不同类型的资源放到不同域名的 CDN 服务上去，以防止资源的并行加载被阻塞

下面是实现以上要求的Webpack配置：

  1. const path = require('path');
  2. const ExtractTextPlugin = require('extract-text-webpack-plugin');
  3. const {WebPlugin} = require('web-webpack-plugin');
  5. module.exports = {
  6.   // 省略 entry 配置...
  7.   output: {
  8.     // 给输出的 JavaScript 文件名称加上 Hash 值
  9.     filename: '[name]_[chunkhash:8].js',
  10.     path: path.resolve(__dirname, './dist'),
  11.     // 指定存放 JavaScript 文件的 CDN 目录 URL
  12.     publicPath: 'http://js.cdn.com/[hash]/',
  13.   },
  14.   module: {
  15.     rules: [
  16.       {
  17.         // 增加对 CSS 文件的支持
  18.         test: /\.css$/,
  19.         // 提取出 Chunk 中的 CSS 代码到单独的文件中
  20.         use: ExtractTextPlugin.extract({
  21.           // 压缩 CSS 代码
  22.           use: ['css-loader?minimize'],
  23.           // 指定存放 CSS 中导入的资源（例如图片）的 CDN 目录 URL
  24.           publicPath: '//img.cdn.com/id/'
  25.         }),
  26.       },
  27.       {
  28.         // 增加对 PNG 文件的支持
  29.         test: /\.png$/,
  30.         // 给输出的 PNG 文件名称加上 Hash 值
  31.         use: ['file-loader?name=[name]_[hash:8].[ext]'],
  32.       },
  33.       // 省略其它 Loader 配置...
  34.     ]
  35.   },
  36.   plugins: [
  37.     // 使用 WebPlugin 自动生成 HTML
  38.     new WebPlugin({
  39.       // HTML 模版文件所在的文件路径
  40.       template: './template.html',
  41.       // 输出的 HTML 的文件名称
  42.       filename: 'index.html',
  43.       // 指定存放 CSS 文件的 CDN 目录 URL
  44.       stylePublicPath: '//css.cdn.com/id/',
  45.     }),
  46.     new ExtractTextPlugin({
  47.       // 给输出的 CSS 文件名称加上 Hash 值
  48.       filename: `[name]_[contenthash:8].css`,
  49.     }),
  50.     // 省略代码压缩插件配置...
  51.   ],
  52. };

在上面的代码中，通过 publicPath 参数设置存放静态资源的 CDN 目录 URL， 为了让不同类型的资源输出到不同的 CDN，需要分别在：

  • output.publicPath 中设置 JavaScript 的地址
  • css-loader.publicPath 中设置被 CSS 导入的资源的的地址
  • WebPlugin.stylePublicPath 中设置 CSS 文件的地址