html页面共享变量,如何通过webpack 实现在 HTML,CSS, JS 中共享变量

概述

项目中通常会需要统一设置样式或者根据某种情况来定 width 和 height, 如何实现在 HTML,CSS, JS 中都能访问到的所谓共享变量呢? 其实都归功于 webpack

作者在阅读了这篇文章之后发现了使用JS 操作 CSS 代价十分昂贵, 会减慢 react 应用的渲染, 主要原因是在 react app 中, react-with-styles使用 runtime 的样式化后的组件会额外生成两个 Context.Consumer以及一个 Provider, 而这些额外的组件使得 CSS 可以监听到某些 JS 事件或者获取变量去更新样式

而静态的 CSS 不会

所以在少部分使用时还好, 但是如果是大规模使用, 比如在 table 中, 就会使得两者的性能差距变大. 但是呢, 谁不想用静态呢? 那不是产品经理有需求, 要动态的去更改啊.

以下方案就是避免了一部分情况下的 JSTOCSS 但并不是所有, 比如用户点击之后对 CSS 进行修改, 这时其实也尽量少的更改 CSS , 而是给组件添加 className, 那样至少省去了 CSS 树的重新构建过程.

设置 app

老样子

yarn init -y

安装打包工具 webpackyarn add -D webpack webpack-cli