Webpack中 CDN加速

阅读《深入浅出的webpack》：CDN加速

一、为什么要用CDN加速？

通过压缩代码的手段可减小网络传输的大小，但实际上最影响用户体验的还是网页首次打开时的加载等

待，其根本原因是网络传输过程耗时较大。

1、CDN（内容分发网络）的作用：

加速网络传输，通过将资源部署到世界各地，使用户在访问时按照就近原则从离其最近的服务

器获取资源来加快资源的获取速度。

原理：

CDN其实是通过优化物理链路层传输过程中的光速有限、丢包等问题来提升网速的，

2、接入CDN

要为网站接入CDN，需要将网页的静态资源上传到CDN服务上，在服务这些静态资源时需要通

过CDN服务提供的URL地址去访问。

3、用Webpack实现CDN的接入

构建需要实现以下几点：

a. 静态资源的导入URL需要变成指向CDN服务的绝对路径的URL，而不是相对于HTML文件

的URL。

b. 静态资源的文件名需要带上由文件内容算出来的Hash值，以防止被缓存。

c. 将不同类型的资源放到不同域名的CDN服务上，以防资源的并行加载被阻塞。

要实现以上要求的最终Webpack配置：

const path = require('path')

const ExtractTextPlugin = require('extract-text-webpack-plugin')

const {WebPlugin} = require('web-webpack-plugin')

module.exports = {

// 省略entry配置...

output: {

// 为输出的Javascript文件名加上Hash值

filname: '[name]_[chunhash:8].js',

path: path.resolve(_dirname, './dist'),

// 指定存放Javascript文件的CDN目录URL

publicPath: '//js.cdn.com/id/',

module: {

relus: [

{

// 增加对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',

}),

// 省略代码压缩插件配置...

]

};

注：核心部分是通过publicPath参数设置存放静态资源的CDN目录URL。

为了让不同类型的资源输出到不同的CDN,需进行以下设置：

a. 在output.publicPath中设置Javascript的地址

b. 在css-loader.publicPath中设置被css导入的资源的地址。

c. 在WebPlugin.stylePublicPath中设置CSS文件的地址。

注：设置好publicPath后，WebPlugin在生成HTML文件并将css-loader转换CSS代码时，会考

虑到配置中的publicPath，用对应的线上地址替换原来的相对地址。

Webpack中 CDN加速相关推荐

webpack打包后引用cdn的js_利用CDN加速react webpack打包后的文件详解
此文不介绍webpack基本配置,如果对基本配置有疑问请查阅官方文档. 1.配置webpack.config.js 将output.publicPath改成上传到的cdn地址, 例(对应上面上传配置) ...
前端Vue项目实现CDN加速
前端Vue项目实现CDN加速我们在开发前端项目的时候难免会遇到请求响应慢,页面数据渲染慢,等等问题.浏览器从服务器上下载 CSS.js 和图片等文件时都要和服务器连接,而大部分服务器的带宽有限,如果 ...
前端项目资源文件使用cdn加速
背景: 前端项目代码在上传到服务器以后资源文件往往会很大而使用的云服务一般带宽都会很小(带宽很贵) 所以资源往往需要放到cdn上面来加速节约服务器的带宽这里我们使用回源的方式来实现cdn加速 ...
CDN加速技术和云计算
首先,让我们来看一下传统的Internet网络的基本结构和数据传输情况,如下图1-1所示. 图1-1 Internet 网络基本结构及数据传输方式 · 根据传统的网络结构,用户的访问流程基本如下: ...
高并发大流量专题---5、CDN加速
高并发大流量专题---5.CDN加速一.总结一句话总结: CDN就是多整几台节点服务器,选距离用户最近的服务器来给用户服务,实现的话可以用阿里云.腾讯云他们提供的功能,简单方便,妈妈再也不用担心我 ...
CloudFlare 免费CDN加速使用方法
前言 cloudflare 是一家国外的 CDN 加速服务商,还是很有名气的.提供免费和付费的加速和网站保护服务.百度云加速的国外节点就是和 cloudflare 合作使用的 cloudflare 的 ...
github加速_使用Picgo+GitHub+ jsDelivr搭建CDN加速免费图床
前言经常写Markdown或者博客的同学,肯定都要用到图床.图床是什么呢?其实相当于一个存储图片的网站,类似百度云这样,不过上传图片到图床后可以直接通过外链进行访问. 比如把本地一张a.jpg上传到 ...
cdn加速怎么样刷新文件
用户在购买CDN服务之后,在使用过程中会比较关心是否有实际效果,首先大家要先确保是否已经开通成功,然后按照基本步骤添加加速域名.配置CNAME,这些都成功搞定之后,接下来就可以测试CDN是否加速成功了 ...
cdn加速的原理是怎么样的
内容分发网络(Content Delivery Network,简称CDN)是建立并覆盖在承载网之上,由分布在不同区域的边缘节点服务器群组成的分布式网络.CDN分担源站压力,避免网络拥塞,确保在不同区 ...
cdn贝免费套餐_阿里云香港服务器带宽太贵怎么办?香港节点全球CDN加速你值得拥有...
阿里云香港服务器带宽太贵怎么办?香港节点全球CDN加速你值得拥有众所周知,香港云服务器比国内云服务器有着明显优势,那就是香港服务器不用备案,省去了备案的繁琐流程.但也有缺点,那就香港服务器要比国内服 ...

Webpack中 CDN加速

Webpack中 CDN加速相关推荐

最新文章

热门文章