Node.js 编译图片研究
现在的前端给人感觉就是万物皆可编译，什么编译 JavaScript，编译 CSS 啊，都已经是司空见惯的事了。今天我们更进一步，来玩玩编译图片是个什么玩意！
我们示例代码目录为：
D:.
index.css
index.html
me-comic-book.jpg
test.js
index.css 源码：
body {
background-image: url("me-comic-book.jpg");
}test.js 源码：
const compile = () => {
const file = require('fs');
const buildFileName = 'build.js';
file.writeFile(buildFileName, '', () => {});
file.readFile('./index.css', (err, data) => {
if (err) {
return console.error(err);
}
let css = String(data).replace(/\s/g, '');
const regex = /['"](.*?\.jpg)['"]/g;
let match;
while ((match = regex.exec(css))) {
const imagePath = match[1];
const imageData = file.readFileSync(imagePath);
const imageBase64 = imageData.toString('base64');
css = css.replace(imagePath, `data:image/jgp;base64,${imageBase64}`);
}
file.appendFile(buildFileName,
'var style = document.createElement("style");' +
'style.appendChild(document.createTextNode(\'' + css + '\'));' +
'document.head.appendChild(style);',
() => {});
});
};
compile();index.html 源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>首页</title>
</head>
<body>
<script src="build.js"></script>
</body>
</html>其中编译结果为 build.js ：
var style = document.createElement("style");style.appendChild(
document.createTextNode('body{background-image:url("data:image/jgp;base64,/9j/4SMHRXhpZgA
ATU0AKgAAAAgAEQEAAAMAAAABCRAAAAEBAAMAAAABDxyGO1O0y6bxN+L.../zEz/8mHy2P90fe0n+9Huf/9k=");
}'));document.head.appendChild(style);在浏览器中打开我们的 index.html ，可以看到我们的背景图片是能够正确地显示的。
这就是我们编译图片所进行的工作，将图片转为 Base64 字符串，这样做的好处有：
- 减少 HTTP 请求（减轻服务器压力）
- 便于压缩
当然，并不是什么图片都适合转为 Base64 的。如果图片符合以下任何一个条件，那都是不适合转为 Base64 的：
- 需要频繁更新的图片
- 需要支持 IE8
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
上一篇： Maven 安装与配置
下一篇： 不要相信一个熬夜的人说的每一句话
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论