Webpack 与内存 #147
Description
背景
原本webpack打包构建后的结果文件是会输出到指定的目录的，也就是我们的磁盘上，但是磁盘读写速度是远不及内存的读写速度的。
所以在某些场景下——需要频繁地读写打包后的文件，比如在开发环境下，我们需要调试页面效果，如果每次都需要等待webpack构建完成后再手动刷新页面是很影响开发效率的。
这个时候使用内存替代磁盘存放构建后的文件成为了明智之举。
库memory-fs顺势而生。
memory-fs
接口很简单，提供了类似nodejs原生库fs的API，不过几乎都不是异步接口。
给一份我在使用这个库的时候打印的数据：
{
"data": {
"E:": {
"": true,
"myLab": {
"": true,
"demos": {
"": true,
"dist": {
"": true,
"bundle.js": { // E:\myLab\demos\dist\bundle.js
"type": "Buffer",
"data": [/*数据的buffer形态*/]
}
}
}
}
},
"a": {
"": true,
"test": {
"": true,
"dir": {
"": true,
"file.txt": { // a/test/dir/file.txt
"type": "Buffer",
"data": [/*数据的buffer形态*/]
}
}
}
}
}
}可以看得出来，memory-fs的数据结构很简单，使用对象存储了路径信息。
结合webapp使用
如果你使用Express之类的框架的话，路由可以返回存储在memory-fs中的buffer数据。
vue的脚手架就是这么处理的，加快了vue的开发效率。
结合热刷新使用
为了让网页在你更新代码之后自动刷新，需要借助WebSocket通知浏览器reload网页。
vue的脚手架也支持热刷新，有点不同的是，支持更高级的热替换，并且在不支持热替换的条件下热刷新。
热替换和热刷新的区别在于，热替换不会刷新页面，保留了页面的状态，在测试表单组件的时候特别友好。热刷新会初始化页面的状态。