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

• 主 資深大佬 : 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 做开发，除了手动，我想不到更好的方式。

• 資深大佬 : Nbsaw

  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>
• 資深大佬 : imjamespond

  没人说起 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 太大了，才用这种古老模式开发..

• 資深大佬 : yanzhiling2001

  @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)

• 資深大佬 : DOLLOR

  这种极端情况下就用 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 牛逼了

• 資深大佬 : galikeoy

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

• 主 資深大佬 : 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 我发现我貌似没看懂你的意思，