React过大的解决方法

tl;dr: 用一个叫Preact的包代替

Preact: https://preactjs.com/

准确的说，应该是React的安装包过大。用他们推荐那个create-react-app，安装上去两万多个文件，150mb
而且cra和新建项目的过程都需要npm下载，不知道这些程序员是网速太快了还是什么的，竟然声称这叫做quick start

而React自己给了一个下载不那么慢的方案，就是用内联的js，但是这个js本身有1M多
（不过后来看了一下这是个开发版，production版是100多kb。还好）

react自己还是不推荐这种做法的，给了另外几个方案，其中有个gatsby声称可以生成静态页面优化产品速度
试用之后，是能跑起来了，但是就算是空无一物的页面，还是会给人加上几百kb的多余文件，这还优化什么速度……

而且，除了那个内联方案，别的都要走上述的安装路线，导致相当的慢……

所以解决方法就是这样的，首先是用内联的方法，然后是用上面的preact代替react的1M多的文件
从这里下到preact的内联用文件：https://unpkg.com/preact@10.1.0/dist/preact.module.js?module

这个是不能直接代替react用的，虽然语法一模一样，但是用的object不同
用内联法需要用babel实时编译，编译出来就是React专有的代码，所以简单的思路，自己假装一个React

编译后的代码主要用到的就只有三个函数，（那别的到底是做什么用的……）

React.createElement // JSX解析用
React.Component // 用来继承对象
ReactDOM.render // 用来添加到DOM，安装版的好像不需要这个

需要做的，就是先把preact.module.js用babel转换一下（莫名加载不了），出来的结果开头是

exports.__esModule = true;
exports.render = E;
exports.hydrate = H;
...

到这一步就很简单了，开头加上

window.Preact = (function() { var exports = {};

结尾加上

return exports;})();

window.React = {
    createElement: Preact.h,
    Component: Preact.Component
};
window.ReactDOM = {
    render : Preact.render
};

然后就可以当成React用啦！完美运行！

顺便说一下安装版的都会自己搭一套基础html，似乎不能自选容器，只会留一个JS入口给你。
真的没问题吗这些人……

另外，preact的安装路线也是比较慢的。不知道哪个程序员，没事加载那么多包，webpack？

最后是试用的感想
这种框架吧，看上去很高端，但是实际上因为写代码本身并不占太多精力，更多的是想好怎么写，以及写完修bug
而这些插件类的，有帮助的部分就只有写代码本身而已，比如这些组件化技术，也就只是节省了自己码组件的时间
的确能用别人写的组件是挺好的，然而别人的组件一旦出了问题，解决起来比从一开始就自己写麻烦一百倍……

你说要是visual系列那种组件，自己不知道怎么开发，也就算了，html这东西自己写一个可能也就一小时的事……
除非是实现特别复杂功能的web app（我觉得现在还不存在这种东西），不然真的没有必要强行用这些东西
甚至觉得这些东西就是程序员开源自毁技术壁垒之后，被另一群程序员强行造出新的壁垒的产物……

其实当时只是觉得JSX好用，但是试用之后的感想就是，还不如直接写innerHTML算了……
本来非用DOM不可就是程序员自我感动的东西，处理html字符串浏览器早就优化好了，为什么要重新自己做一个呢……
还做个shadow DOM，费解，一个DOM慢，难道两个DOM不是更慢吗……
关键是，又快不了多少……

后记：还真有人和我一样的想法（当然嘛），做了个nano-react-app
https://github.com/adrianmcli/nano-react-app