前端阅读-82

[ckinmind]

神奇的CSS3混合模式

对于前端开发人员应该都很熟悉Photoshop的图层混合模式，就是几个图层按不同的模式进行混合，实现不同的图像效果。但是当我们前端同学在切这些效果图的时候，基本上就是一刀切的，即使是文字，当字体很炫的话，我们也不得不用切图来替代。实际上在16年CSS3就新增了一个很有意思的属性 -- mix-blend-mode，我们称之为混合模式，它类同于ps的混合模式，也就是说在CSS中我们也可以利用混合模式制作出一些效果。

启动本地开发环境更快！webpack 动态入口构建的实现

使用动态入口打包后，启动开发服务器只需要 0.5s，需要等待的时间就变成了具体页面资源构建的时间，而且由于 cache-loader 的存在，实际上这些时间可以忽略不计

嗨，送你一张Web性能优化地图

好文mark

---

Webpack 中的 sideEffects 到底该怎么用？

这是一个很常见的按需导入场景，然而在没有 sideEffects: false 配置时，即便 NODE_ENV 设为 production ，打包后的代码里依然会包含 mobx-react-devtools 包，虽然我们没使用过其导出成员，但是 mobx-react-devtools 还是会被 import，因为里面“可能”会有副作用。但当我们加上 sideEffects false 之后，tree shaking 就能安全的把它从 bundle 里完整的移除掉了

React Router 4.x 开发，这些雷区我们都帮你踩过了

mark

Flipboard/react-canvas

React Canvas adds the ability for React components to render to rather than DOM