10种最小和最快的前端Web开发框架

如果你在谷歌搜索，你会发现几十个方便的工具，以提高您的网站的性能。 从优化图像到建立自己的CDN，你可以做的事情非常多。

但是这里有一些设计师想到的事情：优化你的代码。

这可能意味着减少总的HTTP请求，缩小您的文件，或者切换到为速度优化的定制框架。 最新的Bootstrap v4非常棒，但它也是那里最重的框架之一。

我策划了这个列表来展示你可以尝试的最小的web框架，而不是臃肿的Bootstrap。 你可能会惊讶这些是多么伟大，他们会减少你的页面大小。

1.面漆

随着面漆，你会得到一个速度优化的框架。 构建此框架的开发人员专门测试其所有模块，同时针对其他框架运行基准测试。

你可以打赌你的底部美元这个免费的框架将经受住时间的考验。 对于任何网站来说都很棒，而且它非常容易定制。

更不用说整个框架是移动响应，CSS使用BEM命名，所以很容易编辑和混合到自己的样式表中。

2.毫克

另一个极简主义的前端框架是目前在1.3版本中的Milligram。 这是一个极简主义的UI库非常详细，它有一个惊人的大以下。

您可以使用任何主要的软件包管理器（如Yarn，Bower或npm）进行安装。 它在Normalize的基础上工作，它与整个Milligram CSS库的缩小版本打包在一起。

这不包含组件或动态功能，就像您在Bootstrap中找到的那样。 所以它主要面向那些想要构建快速布局而不需要更高级特性的开发人员。

3.纯CSS

纯粹的CSS最好的事情是整个框架是如何进入模块化的风格。 您可以自定义您的样式表，以包含表格设计，自定义菜单，按钮，表单或一切的组合。

或者如果你只是想像一个小样本的图书馆，就像网格，你可以单独下载。 事实上，Pure的网格部分总计大约0.8KB，比Bootstrap或Foundation要小很多。

但是，Pure支持页面组件，所以所有这些小额外可以加起来。

不过这将比Bootstrap小，所以它是一个可行的选择。

4. Mincss

我第一次偶然发现GitHub上的Min CSS库，同时查看这个帖子的图书馆。 我从来没有使用过它，一旦我看着代码，我可以告诉这个事情是真棒。

Min.css被广告为Bootstrap的缩小替代品。 事实上，它自称是最小的前端框架，缩小时总共只有990个字节（小于1KB）。

它适用于所有主流浏览器，甚至支持IE 6+等老式浏览器。

如果你真的想要一个闪电般的加载时间，那么看看Mincss，看看你的想法。 我有一种感觉，你不会失望！

5.花瓣

花瓣是一个相当小的前端框架，具有较小的UI库的独特设计。 它支持一些组件，但是大多数Petal是为了成为所有Sass库的LESS CSS替代品。

在写这篇文章的时候，它仍然处于积极的发展状态，目前的版本稳定在v0.8.3。 Shakr的团队已经在这个框架中投入了大量的时间，而且不可能很快消失。

所有的组件都是可选的，所以你可以通过删除你不需要的组件来简化你的网站。

看一下Petal文档中的所有组件，网格，按钮和代码片段的列表，以使它们全部工作。

6.Picnic

通过Picnic CSS，您可以得到所宣传的内容：轻量级和美观的前端库。

颜色感觉像一个简单版本的Bootstrap使用平面设计制作一个广泛的审美。 无论是个人投资组合，新博客还是电子商务商店，都可以为任何网站运行Picnic框架。

如果你看看示例页面，你会发现一个Picnic的默认元素样式的完整列表。

还有一个超级干净的文档页面，提供有关Picnic CSS入门的说明。

7. Kube

Kube给我留下了深刻的印象，因为它是一个非常好的框架，但它并不是这个列表中最小的。

然而它确实出于某个原因列出了这个列表：它足够小。 整个库编译为大约30KB（包括所有JS组件）。 这比Bootstrap还要小10倍左右，这是相当合理的投资。

但是这绝不可能与Mincss竞争，因为Kube包装了很多东西。 如果这就是你想要的，那么这个图书馆是伟大的！

看看在线文档的例子和代码片段。 Kube感觉像一个真正的专业框架，这绝对是你可以在生产网站上运行的东西。

8. Chota

如果你想要比Kube小10倍的东西，请看Chota CSS框架。

这测量总共3KB缩小，这是一个纯CSS的框架。 这意味着您不必担心下拉菜单，选项卡或其他动态小部件。

Chota也是少数几个不能在预处理器上运行的框架之一。

没有更少，没有萨斯。 只需插入和播放Chota代码，以使其适用于任何布局。

9. Furtive

作为一个自称的“微观框架”，Furtive在压缩时测量大约2.4KB并不奇怪。

它是为数不多的移动优先的框架之一，它将超小文件大小与强大的页面类和结构列表结合起来。

这也是推进现代浏览器技术的最先进的框架之一。 它专门用于flexbox和SVG之类的东西，所以你可以减少你的总代码，并减少你的总加载时间。

10. Siimple

Siimple遵循平面设计趋势，并以一个非常简单的代码库为基础。

这个框架将简约主义提升到一个新的水平，对设计和开发都采取了一种干净的方法。 颜色，排版，网格，他们都遵循一个简约的方法，仍然感觉独特。 超干净的代码库也一样。

看看Siimple文档，看看你的想法。 这是一个非常酷的框架，用于快速原型设计或者无需从头开始构建自定义布局。

但是如实地说，所有这些框架都是很好的起点。 你真的不能对他们的任何错误，这是公平的说，这些都会加载比Bootstrap更快。