1.What is CDN
In fact, what affects the user experience the most is the loading wait when the web page is first opened. The root cause of this problem is that the network transmission process is time-consuming, and the role of CDN is to accelerate network transmission.
CDN is also called content distribution network. By deploying resources to all parts of the world, users can obtain resources from the server closest to the user according to the principle of proximity when accessing , thereby accelerating the acquisition of resources. CDN actually improves network speed by optimizing problems such as limited network speed and packet loss during the physical link layer transmission process.
2. Connect to CDN
When importing resources, they are accessed through relative paths. When these resources are placed on the same CDN service, the web page can be used normally. However, it should be noted that CDN services generally enable long-term caching for resources. For example, after a user obtains index.html the file from the CDN, even if the file is re-overwritten by subsequent publishing operations index.html , the user will not be able to cache the file for a long time. The previous version is still running, which will cause the release to not take effect immediately.
To avoid the above problems, the industry’s more mature approach is as follows:
- For HTML files: Do not enable caching, put the HTML on your own server instead of the CDN service, and turn off the cache on your own server. Its own server only provides HTML files and data interfaces.
- For static JavaScript, CSS, images and other files: Enable CDN and caching, upload to the CDN service, and give each file name a hash value calculated from the file content, such as the
app_a6976b6d.cssfile above. The reason for bringing the Hash value is that the file name will change with the file content. As long as the file changes, its corresponding URL will change, and it will be re-downloaded, no matter how long the cache time is.
After adopting the above solution, the resource introduction address in the HTML file also needs to be replaced with the address provided by the CDN service.
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//cdn.com/id/app_a6976b6d.css">
</head>
<body>
<div id="app"></div>
<script src="//cdn.com/id/app_9d89c964.js"></script>
</body>
</html>body{background:url(//cdn.com/id/arch_ae805d49.png) repeat}h1{color:red}In other words, the previous relative paths have become absolute URLs pointing to the CDN service.
URLs such as //cdn.com/id/app_a6976b6d.css omit the preceding http: or https: prefix. The advantage of this is that when accessing these resources, it will automatically determine whether to use HTTP based on the mode of the current HTML URL. Or HTTPS mode.
3. How to avoid blocking
In addition, if you also know that the browser has a rule that there are restrictions on parallel requests for resources of the same domain name at the same time (the specific number is about 4, different browsers may be different), you will find the above approach There is a big problem. Since all static resources are placed under the same domain name of the CDN service, which is the above cdn.com. If a web page has many resources, such as a lot of pictures, the loading of resources will be blocked, because only a few can be loaded at the same time, and you must wait for other resources to be loaded before continuing to load. To solve this problem, you can disperse these static resources to different CDN services, such as placing JavaScript files js.cdn.com under the domain name, placing CSS files css.cdn.com under the domain name, and placing image files img.cdn.com under the domain name.
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="//css.cdn.com/id/app_a6976b6d.css">
</head>
<body>
<div id="app"></div>
<script src="//js.cdn.com/id/app_9d89c964.js"></script>
</body>
</html>Using multiple domain names will bring about a new problem: increasing domain name resolution time. Whether to use multiple domain names to disperse resources needs to be weighed based on your own needs. <link rel="dns-prefetch" href="//js.cdn.com"> Of course, you can pre-resolve the domain name by adding it to the HTML HEAD tag to reduce the delay caused by domain name resolution.
4. Use Webpack to implement CDN access
To summarize what was said above, the build needs to achieve the following points:
- The import URL of static resources needs to become a URL pointing to the absolute path of the CDN service rather than a URL relative to the HTML file.
- The file name of the static resource needs to have a hash value calculated from the file content to prevent it from being cached.
- Different types of resources are placed on CDN services of different domain names to prevent parallel loading of resources from being blocked.
Let’s first look at the final Webpack configuration to achieve the above requirements:
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`,
}),
// 省略代码压缩插件配置...
],
};The core part of the above code is to publicPath set the CDN directory URL for storing static resources through parameters. In order to allow different types of resources to be output to different CDNs, they need to be:
output.publicPathSet the JavaScript address in .css-loader.publicPathSet the address of the resource imported by CSS.WebPlugin.stylePublicPathSet the address of the CSS file in .
After setting up publicPath , WebPlugin when generating HTML files and css-loader converting CSS code, the configuration will be taken into account publicPathand the original relative address will be replaced with the corresponding online address.