不超过 150KB 的网页项目，除了 jquery 没别的办法了吗？

[youla]

做路由器的管理界面，生产的模块可以用于存放网页的区域，容量只有 150KB 。

关键还要好看。。

[youla]

@oxromantic 我们的路由器不同，网页端是有独立的模块，这么模块上的存储芯片就只有这么大。

[SilentDepth]

如果对动态界面需求不大，Alpine.js 不错，gzip 后 8.3 KB，用起来很简单，基本就是真·HTML，没 JS 多少事儿。

如果有较高的动态界面需求，或者想尽可能实现点酷炫的交互，可以考虑 Mithril.js ，gzip 后 9.8 KB，连带 Ajax 、Promise 、router 都包了，拎包入住。

不过需要注意的是，上述两个框架（的最新版）都只官方支持到 IE11 。所以如果你对浏览器兼容有要求，建议考虑其他方案。（ Mithril 1 可以支持到 IE9，但注意文档版本。）

不建议 jQuery 。不是说 jQuery 不好，而是在有现代前端框架可用的情况下，看不到使用 jQuery 的必要性。

Vue 2 也可以考虑，gzip 后 22.9 KB，但你实际开发的时候很可能需要再加上 9.6 KB 的 Vue Router 。加起来 30 多 KB 的体积……好像也还可以哈？

如果你希望界面足够好看，真正占体积的是资源素材和 CSS 。如果你有手写样式的能力，不建议使用现成的样式框架（体积不好控制），建议 Tailwind CSS （启用 purge 功能）一把梭。以我对（民用级）路由器管理后台的了解，150 KB 不是个难以实现的目标。

[SilentDepth]

如果你决定使用 Tailwind CSS，同时只对基础控件（文本框、选择框、复选框啥的）的样式有现成方案需求，可以参考 `@tailwindcss/forms`，一个 Tailwind CSS 对表单元素的官方插件。直接用也行，足够美观了。

关于审美，其实基于 Tailwind CSS 默认配置把握几个原则，做出来的东西都不会太差：

- 使用留白
- 使用统一尺寸
- 使用较少的颜色
- 在保证对比度的前提下使用多个明暗度（ blue-500 、blue-300 之类的）

[youla]

@SilentDepth 我都蒙了，我是写傻了，就封装一个 websocket 方法，直接 html 调用多省事，vue jquery 完全不需要，不过提的需求很恐怖阿，大概还包含一个图形化路由器的状态界面，之前用 jquery 是想着自己应该能比较方便的做一些饼干状图。

[SilentDepth]

@youla #84 emmm，突然对你的实际需求感到迷惑了。你要做的不是整个后台界面，而是其中的一部分？而这一部分有单独的 150 KB 空间？那就无所谓了，怎么顺手怎么来就行了。150 KB 的话，老实说 D3 都放得下😂️

[vone]

建议不要和楼主争论具体的技术问题，可以看以前他的回复记录。

[Pi7bo1]

回复人都看傻

[youla]

@SilentDepth 一个单页的路由器管理界面阿。

[youla]

@vone 把什么都认为是在争论的人是狭隘的

[youla]

@SilentDepth 我再补充一下，一个路由器的界面全是我写，本身也就只有一个页面，大概效果类似华硕图形化 bios 界面那个样子（这是需求）

[youla]

@vone 不过我还想回复一下，用 windows 打开 cmd，del 不能删目录，rd 不能直接删除文件，我看看还有没有杠精

[SilentDepth]

@youla #88 你说的单页是指 SPA ？那「封装一个 websocket 方法」是指什么……不过总之，目标是 SPA 的话考虑 Vue 没毛病啊，手撸 HTML/JS 是图啥。简单图表的话，div + CSS transition 就够用，状态驱动靠框架；想要更复杂一点的就手写 SVG，状态驱动还是靠框架。

[youla]

@SilentDepth 没那么复杂，本身功能不多，现在就一个 html 页面，左侧菜单，display 控制内容显示那些。
就是现在写出来太大了
===================
| m : my router exit
| e : —————————
| n :
| u : 点击菜单变化内容
| -- :
===================

[youla]

@SilentDepth websocket 是通信的协议，大概就是模块内置了一个 websocket 服务端会处理前端发送的 HEX 数据，然后通过串口转发给其他模块完成任务，嵌入式我也不是很懂...

[SilentDepth]

我整理一下我的理解：你的工作是开发一个涉及路由导航和图表的前端页面，这个页面的核心业务是通过 WebSocket 与其他后端系统模块进行通讯，而你现在遇到的问题是不知道选择什么技术栈能更好地完成你的工作。

这样的话，看需求设计包含的工作量了。如果没几个子视图，视图内容也比较简单，手撸 HTML/JS 我觉得也行。甚至 jQuery 都不用：`const $ = document.querySelectorAll`。如果子视图数量多，或者涉及不少数据逻辑，上框架会省事些，至少便于你实现组件化，少点思维负担。

虽然我嚼着一个路由器后台的子视图也不少了。

[hronro]

给个建议，150 KB 直接存 GZIP 之后的压缩文件，现在应该没有浏览器不支持 GZIP 了吧？
这个方法实行起来最简单，还可以配合楼上给出的各种建议一起食用，并且效果大概率超过任何一个楼上们给出的框架上优化的建议。

[johnkiller]

外部引用一个 js，该 js 加载创建所有网页元素。
那么路由器上就只用存放一个<script src="xxx.js"> </script>

[SilentDepth]

@johnkiller #97 如果路由器没有 WAN 呢

[youla]

@SilentDepth 肯定没有路由的功能，不必纠结这些，我这只是一个用来开发的模块。

[youla]

@SilentDepth 我发现我貌似没看懂你的意思，