本项目源码均可在 这里 找到。
之前公司的官网项目静态文件都是放在静态效劳器中,这个中的弊病就不赘述了。简朴说一下 CDN 的优点:
CDN 可以处置惩罚因散布、带宽、效劳器机能带来的接见耽误题目,适用于站点加快、点播、直播等场景。运用户可就近获得所需内容,处置惩罚 Internet 收集拥堵的状态,进步用户接见网站的响应速率和成功率。掌握时延无疑是当代信息科技的主要目标,CDN 的企图就是尽量的削减资本在转发、传输、链路发抖等情况下顺遂保证信息的连贯性。CDN 就是扮演者护航者和加快者的角色,更快准狠的触发信息和触达每个用户,带来更加极致的运用体验。
上传剧本文件
这里为了最小化演示途径,我们只上传项目所用的 js 文件。且 CDN 基于七牛云。
// webpack.config.js
module.exports = {
// 进口文件
entry: './src/app.js',
// 打包出口
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'app.js',
publicPath: 'http://example.clouddn.com/example/' // CDN 地点
}
}
在 output.publicPath
中可以设置我们的 CDN 地点(这里你要有一个七牛云的 账户 )。以后我们引入 qn-webpack。
plugin 设置见该 plugin 源码即可。这里有一份示例设置:
// webpack.config.js
const qiniuWebpackPlugin = new QiniuWebpackPlugin({
accessKey: '七牛云个人面板 > 密钥治理 > AK',
secretKey: '七牛云个人面板 > 密钥治理 > SK',
bucket: '对象存储空间名',
path: '空间内保留途径',
exclude: /index\.html$/ // 须要消除上传的文件
});
module.exports = {
// 加载插件
plugins: [ qiniuWebpackPlugin ]
};
如今运转:
npm run build # webpack --mode=production
在终端中我们已可以看到我们的 js 文件被上传至自身的 CDN 效劳中。经由过程 html-webpack-plugin 我们引入 js 的途径也响应的替代成了 CDN 地点。
上传图片
许多时刻,在我们的项目中,须要去:
import url from './your/img/path';
<img src={url}>
图片挂上 CDN 也是很有必要的,图片视频文件之类的东西自身就比较大而且可以算是静态的内容,从动态效劳器上星散出去,可以极大的减小效劳的负载。迥殊像是七牛云如许具有图片处置惩罚引擎的效劳商,我们还可以经由过程 imageView2 来处置惩罚上传至 CDN 的图片。
说回图片上传,起首我们引入 file-loader ,Webpack 设置以下:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.(gif|png|jpe?g|svg|webp)$/i,
use: [
{
loader: 'file-loader',
options: {
// publicPath: 默许 `__webpack_public_path__` 为 `output.publicPath`
}
}
]
}
]
}
}
file-loader 会指导 Webpack 将所需的对象作为文件引入并返回其大众 URL 。
再次运转:
npm run build # webpack --mode=production
两个文件已被上传至 CDN ,且途径被替代。然则, 2.74 MiB
与背面的 [big]
非常艳丽,下一步我们须要紧缩图片以削减文件体积。
处置惩罚图片
之前我们可以看看 Chrome 掌握台:
2.7 MiB
的图片就算放在 CDN ,要求时候也超过了 100ms
,那末我们最先处置惩罚图片。
引入 image-webpack-loader 并最先设置 Webpack :
//webpack.config.js
module.exports = {
module: {
rules: [{
test: /\.(gif|png|jpe?g|svg|webp)$/i,
use: [
{
loader: 'file-loader',
options: {
// publicPath: 默许 `__webpack_public_path__` 为 `output.publicPath`
}
}, {
loader: 'image-webpack-loader',
options: {
mozjpeg: {
progressive: true,
quality: 65
},
optipng: {
enabled: false,
},
pngquant: {
quality: '65-90',
speed: 4
},
gifsicle: {
interlaced: false,
},
WebP: {
quality: 75
}
}
},
],
}]
}
}
细致设置拜见 文档 。
再次打包:
发明图片大小从 2.74 MiB -> 1.16 MiB
虽然照样有点大,然则已有很明显的大小变化。再来看看 Chrome 掌握台:
结果很明显 140 ms -> 43 ms
。
WebP
在举行这一步之前,须要简朴相识一下什么是 WebP 花样图片。
现在挪动端 Android 4.0 以上、PC 端 Chorme 10+(14 ~ 16 有衬着bug)、Opera 11+ 、Safri 均支撑 WebP 花样图片。 WebP 与 jpg 相比较,编码速率慢 10 倍,解码速率慢 1.5 倍,而绝大部分的收集运用中,图片都是静态文件,所以关于用户运用只须要体贴解码速率即可。但实际上,webp 虽然会增添分外的解码时候,然则因为削减了文件体积,缩短了加载的时候,实际上文件的衬着速率反而变快了。
搬运知乎上的一张图片:
所以我们可以得出结论:WebP 体积大幅削减,图片质量也有保证,除了兼容性不太好。
关于兼容性,我们可以看这张图:
考虑到兼容性的题目,我们以后会举行特地处置惩罚。如今第一步则是转化 png & jpg -> Webp
。
这里选用 gulp 作为转化图片为 WebP 的自动化构建东西。Webpack 社区插件看 这里,我这里选用 gulp 作为构建东西也是愿望自身可以掌握 WebP 图片的制造,在当地天生而不是 CI 打包时(时候有点长… 。
//gulpfile.js
const gulp = require('gulp');
const webp = require('gulp-webp'); // 基于 cwebp 的 gulp 插件
// 基于 cwebp 转化图片
gulp.task('webp', () =>
gulp.src('src/img/*.{png,jpg,jpeg}')
.pipe(webp({ quality: 75 })) // 概况设置见:https://github.com/imagemin/imagemin-webp#api
.pipe(gulp.dest('src/img'))
);
// 监听文件夹变化
gulp.task('watch', () =>
gulp.watch('src/img/*.{png,jpg,jpeg}', ['webp'])
);
gulp.task('default', () =>
gulp.start('watch')
);
设置以后我们运转打包可以比较一下:
- 运用 WebP 花样前
- 运用 WebP 花样后
末了我们在项目中运用 WebP 时刻,须要推断一下浏览器是不是支撑 WebP 花样图片:
const canUseWebp = (() => {
return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') > -1;
})()
// 假如可以运用 WebP ,则给顶部元素加上一个 class
if (canUseWebp) {
document.getElementsByTagName('body')[0].className += ' webp';
}
将这段 js 内联在 head 标签中后,我们可以应用 CSS 预处置惩罚器来推断是不是须要运用 WebP 花样图片。
// stylus
bg($url, $type)
background-image url($url + $type)
.webp & // 假如具有 .webp 类名,则运用 WebP 花样图片
background-image url($url + '.webp')
// less
.mixin(@url, @type) {
background-image: url(@{url}.@{type});
.webps & {
background-image: url('@{url}.webp');
}
}
// scss
@mixin bg($url, $type) {
background-image: url($url + $type);
@at-root(with: all) .webps & {
background-image: url($url + '.webp');
}
}