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

[youla]

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

关键还要好看。。

又上下翻了几个来回，周末有得玩了~~

都玩不过来了～～又抚摸键盘到凌晨，这几天本来没什么事做，现在有做不完的事了！

我要加油学学学，成为大神不是梦（三和）！！！凌晨安了 💓

什么时候做web用nginx都要是常识了？不就对着文档搜着教程配置吗？？怎么还搞得那么厉害一样？？

我一直用的iis，不需要nginx，没什么问题吧？？？然而这个模块里是定制的HTTP Server，我也改动不了，也不想去麻烦别人公司的。。

上面的回复是针对设置gz响应头的

大家说的我基本都跑了hello, world!有的可以打包很小的，貌似要ts写，奈何自己不会typescript，有点小尴尬～

决定了用pure-css写界面，其他的就原生js吧，后续可能会被一些图表之类的需求搞得很头痛！！！！

最后在大胆的伸一次手，有没有类似jquery，但是很小的库，因为担心ie11可能不兼容某些js写法，比如document.body.style=''，例子，我一般也不这么写...

pure-css + zepto

太适合萌新了......

埋头苦干！！！

昨天写项目时，我终于知道我为什么要用 jquery 了，因为我想起来模块内置的 api 返回的内容是 html 格式，所以要用 jquery 操作 dom ！

[youla]

目前在用 vue.min.js + jquery，但是做出来不好看 >_

[youla]

有没有小，还成熟的 PC 端库，能直接一个文件引用的，美化过控件的（按钮、输入框、单选、多选...）。

[opengps]

很想知道这类设备自己实现个 web 服务端得多累

[mclxly]

省体积：vue 可以取代 jquery
要好看：找美工

[InternetExplorer]

引用外部资源

[youla]

@opengps 我负责的模块是串口转以太网，我前端用 websocket 发送 16 进制数据会通过串口转发其他模块处理，其他模块与我无关，貌似是 c 写的

@mclxly 美工的图片就放不下了

@InternetExplorer 然后你发现没网络配置不了路由器

[baobao1270]

JS 自己实现吧，嵌入式就别用框架了
好看的话主要是 CSS，和 JS 关系不大。只有 150KB 的话建议抛弃动画。

[luob]

https://github.com/yisar/fre，1KB 的 react

https://github.com/pure-css/pure ，gzip 之后 3.7KB 的 css 框架。

[youla]

@baobao1270 主要是自己没审美，哎，UI 也没有

@luob 我的天，厉害了~~谢谢

[youla]

@luob 今天下午有得玩了...

[gowk]

Mithril.js + Bulma

[yinzhili]

用 jQuery，然后自己手写 css，应该不会超过 150k

[baobao1270]

@youla 其实可以抄以下 TP-Link 的老后台界面。把字体改成黑体，配色改成比较现代的风格，再扁平化一下，就好看很多了。

图： https://image2.sina.com.cn/IT/h/2006-09-08/3c1d45d3975101b87db8e2f4397a2ef4.jpg
配色可以去这个网站： https://colorhunt.co/

[youla]

@gowk 孤陋寡闻不知道这么多黑科技！！！
@yinzhili 主要是我其实真正能用到的只有不到 70k，很头疼，缩水坑用户坑开发

[CallMeReznov]

手啃.

前阵子在批站 arduino 作者里他这个东西做的就挺好,几乎手写的.
https://github.com/bilibilifmk/ESP_weather_Cube/tree/master/%E6%BA%90%E7%A0%81/qxz/data

[youla]

谢谢你的配色，抄肯定不会，要有自己的风格，我多学学 css 吧。

[youla]

@CallMeReznov 我有点慌啊，我怕下层用户直接发个固件给我刷！！！

[youla]

@baobao1270 #16

[lin07hui]

都用上 vue，还把 jquery 加上，看来你不了解 vue 。

[youla]

@lin07hui 不是我不了解 vue，是你不了解 jquery，我只是为了更方便的操作 dom，设置属性之类的，因为我基本不手写 html，vue 的话，我是为了双向绑定，还可以让 js 看起来好看一点（也不知道该怎么形容）。

[KuroNekoFan]

可以选择 vanilla

[ctt]

zeptojs 还不错，兼容 jq 语法

[manhere]

内容 gzip 之后放入 flash，150K 足够了

[zkl2333]

@youla vue 和 jq 确实二选一就够了，没必要而且不建议一起用。同时用的话 jq 操作 dom 会引起 vue 的 vdom 和 dom 的不同步，出现灵异 bug 。前面有朋友推荐 fre，确实很小很厉害。我建议你可以了解一下，虽然我没用过但是作者是很有趣的一个家伙。而且其实用原生 js 也不是不行嘛。

[sagaxu]

@youla 还要手动操作 dom，看来是真的不熟悉 vue

[CamD]

svelte 也可以看看

[echowuhao]

Alpine.js: The JavaScript Framework That’s Used Like jQuery, Written Like Vue, and Inspired by TailwindCSS

Alpine.js is lighter weight than jQuery, coming in at 21.9kB minified — 7.1kB gzipped — compared to jQuery at 87.6kB minified — 30.4kB minified and gzipped. Only 23% the size!

https://css-tricks.com/alpine-js-the-javascript-framework-thats-used-like-jquery-written-like-vue-and-inspired-by-tailwindcss/#:~:text=js%20provides.-,Size,Only%2023%25%20the%20size!

[lin07hui]

@youla 我 2008 年开始使用 jquery , 因为 ie8 的原因 2017 年还在用 jquery 。。。

[wangbudong]

连 jq 都不用更好

[christin]

不太明白为什么要 jq+vue
可以选择手写 css GitHub 上找合适的 css 库 把里面用到的组件代码复制进去 再压缩 按需的话也用不了多少内存

[christin]

@lin07hui 大佬 nb

[chihiro2014]

svelte 应该就这了

[love]

jquery 就算了，而且也不小啊。
可以看一下 preact 它家的一系列东西，追求的就是小而强大

[youla]

@sagaxu 我又不是 npm 做开发，除了手动，我想不到更好的方式。

[ashita]

https://github.com/yyx990803/vue-lit

这个咧。

[youla]

@sagaxu 往往你以为的最佳方式，可能对我并不适用。

[youla]

@Nbsaw 我越来越有信心了~~十分感谢大家，今天的收获好多

[sutra]

好看，还要小的话，是不是设计的时候多使用 svg 会好点？

[zkl2333]

@youla
“我又不是 npm 做开发，除了手动，我想不到更好的方式。”

你不是用了 vue 怎么就没有其他方式了，npm 和操作 dom 也没什么关系。vue 和 react 都可以脱离 npm 和 node 环境单独引入。不过还是建议用上 webpack 之类的打包工具，因为按需加载和 tree shaking 等等一系列工具链带来的福利可以显著缩小项目体积。

[youla]

@zkl2333 jquery 操作 dom 直接填充一方面可以减少代码量，也感觉比较好管理吧。不过更重要的还是看代码怎么写，条件允许的情况下我也挺喜欢怀旧的，实际上，我很早就不用 jquery 了。最后我还想说，你就是说再多，我也不会和你上床的。

[lichdkimba]

不复杂的话纯原生？？

[youla]

@lichdkimba 我要有那水平就不会来提问了！基本都会写，就是审美太差！！

[lin07hui]

70k 容量放不下 jquery.min.js ，也放不下 vue.min.js 。其它小体积的框架对 ie 的支持都是 ie10+。

[weixiangzhe]

资源全走 cdn，图片放 oss 可以放好多 html doge

[youla]

@lin07hui 我突然想想也是，我都忘了，我现在测试环境，我都是用 cdn 。🤔

[heyjei]

@youla 你确定你的设备可以访问网络嘛

[px920906]

有兼容 IE10 及以下的要求吗，没有的话不负责任（因为没用过）再提供个选择，10kb，比 8 楼的 pure 大点，但也更好看，组件也多些，只有 css，一些逻辑需要自己实现。https://github.com/picturepan2/spectre

“更方便的操作 dom，设置属性之类的”，vue 也可以做到吧，而且以我的认知，vue 这类 MV*框架目的就是避免手动操作 dom 啊。想问问楼主是什么样的需求非 jquery 不可

[youla]

@px920906 我说的是创建 dom 放上去设置属性的过程，因为我不想翻来翻去看 html 看 js，ie11 吧。

[lin07hui]

感觉只能纯原生了： https://github.com/nefe/You-Dont-Need-jQuery

[daysv]

直接纯原生就好了

[agdhole]

看了一圈很好奇楼主什么操作 dom 场景会比 mvvm 更方便的

[px920906]

@youla 用 vue 可以提前写在模板里，用 v-if 控制是否在 dom 上，属性用 v-bind 加，为什么一定要这个过程，用户又看不到。而且 vue 一部分逻辑和 html 写在一起还好，写 jquery 和原生 js 反而会需要更多的 html 、js 之间来回看吧

[youla]

@px920906 我说的是我不想写 html，因为不喜欢翻来翻去，我的 html 代码通常只有<body><script>...</script></body>

[JQD6r41PkI4o2mEz]

没人说起 svelte 么？

[px920906]

@youla 那 vue 的模板部分怎么办，难道你是用 jquery 填充字符串进去，再初始化 vue 实例的么。。

[lin07hui]

@imjamespond 上面有 2 个。但 LZ 不在 node 环境开发。用 svelte 应该体积是最小的

[youla]

@px920906 是一步一步创建节点、追加，而不是$("整个页面")，创建节点的时候，也可以把 dom 赋值到 data()，然后 this.xx 调用，不用 jquery 时是<div ref="xx"> this.$ref.xx ，感觉其实都差不多的，我平时也不会用 jquery 的，确实很久没玩了，怀个旧。

[youla]

@lin07hui node 也行啊，我只是之前打包 vue 太大了，才用这种古老模式开发..

[40EaE5uJO3Xt1VVa]

@weixiangzhe 是放在路由器里的，离线环境就用不了 cdn 了

[Cbdy]

Vanilla JS

[namelosw]

Preact

Hyperapp

[jzmws]

jq +css 自己实现

[dcalsky]

你说的功能用 gatsby 可以做到 react 150kb 以下

[Kasumi20]

http://vanilla-js.com/

[cyberpoint]

我写过单片机的界面，用的 svelte，用法类似 vue 和 react 的结合。请求仅仅是自己对 websocket 和 fetch 做最简单的封装。UI 部分自己写的，如果你想用 UI 组件库，可以找找原生 web component 写的组件库。我最后打包在 100kb 左右，在 chrome 系浏览器没有任何问题。

[cyberpoint]

@cyberpoint 我精简下语言：svelte + web component

[cyberpoint]

@cyberpoint svelte 类似于 vue，web components 类似于 Element ui 。
ps：web components 实现的组件库比如：[xy-ui]( https://github.com/XboxYan/xy-ui)

[AV1]

这种极端情况下就用 vanilla 吧，我连 jQuery 都不屑的。

[no1xsyzy]

vanilla 挺好的
jquery 可以用打包器，只引需要的模块。
Vue 和 JQuery 功能重合度太高。

至于 Svelte，它是个编译器，但其实强行套用 ECMA 新语法有点蠢，export 直觉上应当是从内向外的数据流，但 svelte 下是从外向内的……

[mamahaha]

Vanilla JS 是框架党嘲风原生党的，但是原生党表示这个词挺好的。

[oxromantic]

路由器只放 api，控制台走外部可破；另外都路由器了这个 150k 指的是文件系统压缩后的限制吧？

[kongkx]

vanilla，自己实现一堆 dom 操作以及模板渲染方法，自个儿维护，哈哈

[mingl0280]

js 资源你可以调外部的，甚至可以强制 deflate 头然后存 gz 文件，有啥不好弄的……

[ianva]

web-components 多好用的，用什么 jQuery 呢
google 的 it-element https://lit-element.polymer-project.org/
ionic 的 https://stenciljs.com/
写法类似 angular, react 但整个库的代码相当少

[fengxianqi]

看了一圈，用 jq 就可以不写 html ？？？

[QiaTia]

直接 webpack + babel + Less 手写 JS, + Css 有何不可能, 为啥要用框架呢?

[AmrtaShiva]

@luob 牛逼了

[dfourc]

```是一步一步创建节点....确实很久没玩了，怀个旧。```
技术更新太快，如果不会可以问下或者搜下正确开发姿势，不过 你喜欢最好，能跑就行

[youla]

@fengxianqi 就算不用 jq 也可以不手写 html，let div=document.createElement("div");div.setAttribute("id","app")，我只是喜欢 jq $("<div id='app'>")顺带还可以直接写属性。

@galikeoy 我不会有你说的这么没追求的想法，还有我这不就是来问了么？技术更新快怎么了，我能跟上，我一般用 vue-cli （ babel stylus less ）有问题吗？我生产都是用 vue3 了。还有不到 150kb，我确实还没找到“正确”的开发姿势，这和环境受限有关，不理解面向对象的话，创建 dom 方式去写一堆没必要的垃圾是很正常的，但请相信我，我和他们不一样。

[youla]

@mingl0280 你以为路由器里面是个 apache 吗？？

[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 我发现我貌似没看懂你的意思，