大字节与小字节_为了更大的利益，网络应用程序中的每一个小字节都被压缩的千字节之战...

大字节与小字节

I often find myself browsing the internet on my older phone, waiting endlessly for applications to load only to click on the wrong button because some other HTML element rendered itself slightly later than the button. Pushing the button down revealed some other link.

我经常发现自己在较旧的手机上浏览互联网，无休止地等待应用程序加载，仅是单击了错误的按钮，因为某些其他HTML元素的渲染比按钮稍晚。 按下按钮会显示其他链接。

Why can’t web pages be... lighter?

为什么网页不能...更浅？

There are many ways in which you can speed up page render speeds. One particular way I’d like to focus on today is reducing the amount of stuff we send to our poor visitors.

您可以通过多种方法来加快页面渲染速度。 我今天要重点关注的一种特殊方式是减少发送给贫困游客的物品数量。

While size does matter, I still want to use a cutting-edge component library. I have recently been favoring Preact over other component libraries.

虽然大小很重要，但我仍然想使用最先进的组件库。 我最近一直喜欢Preact而不是其他组件库。

The nice advantage of Preact is that it is tiny! When comparing React’s 109kb (34.8 kb gzipped) size to Preact’s 3kb size, it’s quite obvious that Preact is an attractive option.

Preact的好处是它很小！ 当比较React的109kb(压缩后的34.8 kb)大小和Preact的3kb大小时，很明显Preact是一个有吸引力的选择。

Preact does come with the drawback that it does not offer as many features as React does and it takes a little while to get used to, but I have found this not a reason to be deterred.

Preact确实具有一个缺点，即它没有提供像React一样多的功能，并且需要一些时间来习惯，但是我发现这并不是阻止的理由。

Now that we’ve settled on our component library, I’d like to introduce you to a concept that has recently been gaining a bit more traction: CSS-only frameworks. The great thing about CSS-only frameworks is that they’re extremely lightweight, and when built well, they allow you to easily customize the CSS framework to tailor to your specific needs.

既然我们已经了解了组件库，那么我想向您介绍一个最近受到更多关注的概念：纯CSS框架。 仅CSS框架的优点在于它们非常轻巧，并且构建良好时，它们使您可以轻松自定义CSS框架以适应您的特定需求。

My favorite CSS framework by far is Bulma. It is lightweight, well documented, and infinitely customizable.

到目前为止，我最喜欢CSS框架是Bulma 。 它是轻量级的，有据可查，并且可以无限地自定义。

Lastly, I’d like to mention that I’m a huge fan of TypeScript and will be using TypeScript in this article.

最后，我想提一下，我是TypeScript的忠实拥护者 ，并将在本文中使用TypeScript。

Enough talk! Let’s build an example project! Let’s install the preact-cli to help us create our first project:

聊够了！ 让我们构建一个示例项目！ 让我们安装preact-cli来帮助我们创建第一个项目：

npm i -g preact-cli

With Preact CLI installed, let’s create a new TypeScript project called my-app:

安装Preact CLI后，让我们创建一个名为my-app的新TypeScript项目：

preact create typescript my-app

We can now run our app in the background by entering the following command in our terminal:

现在，我们可以在终端中输入以下命令在后台运行我们的应用程序：

npm run dev

Our next step will be acquiring Bulma and installing it:

我们的下一步将是获取Bulma并安装它：

npm install bulma node-sass sass-loader --save-dev

Normally, you would want to save these kinds of dependencies as an ordinary “dependency,” as you’d just include the entire CSS file. However, we’re going to be using a CSS loader to only load the CSS that we actually need for our application, slimming down our app as much as we can!

通常，您希望将这些类型的依赖项保存为普通的“依赖项”，因为您只需要包括整个CSS文件即可。 但是，我们将使用CSS加载程序来仅加载应用程序实际需要CSS，从而尽可能地简化我们的应用程序！

We will also need a Sass loader to be able to import parts of the Bulma library.

我们还将需要一个Sass加载程序，以便能够导入Bulma库的某些部分。

Let’s create a file under the src/style directory, call it index.scss, and import the necessary CSS to add a Bulma-themed button to the front page of our web application:

让我们在src/style目录下创建一个文件，将其index.scss ，并导入必要CSS以在我们的Web应用程序的首页中添加一个以布尔玛为主题的按钮：

@import "index.css";


@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/base/_all.sass";
@import "~bulma/sass/elements/button";

Also, make sure to change the first line of index.js under src to import “./style/index.scss”.

另外，请确保将src下的index.js的第一行更改为import “./style/index.scss” 。

After looking over the documentation on buttons for Bulma, it seems like we’ll have to create a simple <button> element and assign it to the button class. Sounds easy enough! Let’s change our code in src/routes/home/index.tsx to:

在查看了有关Bulma 按钮的文档之后，似乎我们必须创建一个简单的<button>元素并将其分配给button类。 听起来很简单！ 让我们将src/routes/home/index.tsx代码更改为：

// file src/routes/home/index.tsx


import { FunctionalComponent, h } from "preact";
import * as style from "./style.css";


const Home: FunctionalComponent = () => {
    return (
        <div class={style.home}>
            <h1>Home</h1>
            <p>This is the Home component.</p>
            <button class="button is-primary">
                Hello world!
            </button>
        </div>
    );
};


export default Home;

Switch back to your browser and you should be able to see a beautiful button appearing!

切换回浏览器，您应该能够看到一个漂亮的按钮！

Time to put our application to the test. Let’s run the following command to truly squeeze out the smallest blob of code we can think of:

是时候将我们的应用程序进行测试了。 让我们运行以下命令，以真正挤出我们能想到的最小的代码块：

preact build --no-sw --no-ssr --no-esm
serve -s build

Let’s open up Lighthouse and see the difference between an application that has exactly the same code (replacing preact-router with react-router-dom ):

让我们打开Lighthouse，看看具有完全相同代码的应用程序之间的区别(将preact-router替换为react-router-dom )：

Preact and Bulma: A total size of 23.7kb!

Preact和Bulma：总大小为23.7kb！

The same application in React. Still small, but three times as large!

React中的相同应用程序。 仍然很小，但是大三倍！

Neat! It might not seem like much, but a 50kb difference could mean quite a bit on very slow connections or phones.

整齐！ 看起来似乎不多，但是50kb的差异可能意味着在非常慢的连接或电话上有很大的差异。

I hope you were able to learn something about CSS-only frameworks, Preact, and creating smaller web applications while still enjoying the experience of component libraries such as Preact. As always, feel free to reach out if you have any questions!

我希望您能够学习有关纯CSS框架，Preact的知识，并创建较小的Web应用程序，同时仍能享受诸如Preact之类的组件库的经验。 与往常一样，如果您有任何疑问，请随时与我们联系！

翻译自: https://medium.com/better-programming/battle-of-the-kilobytes-squeezing-out-every-little-byte-in-web-applications-for-the-greater-good-98489143ab5f

大字节与小字节