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

大字节与小字节

Often I 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 revealing some other link.

其他一些html元素则比按钮稍晚呈现自身，将按钮向下推可显示其他链接。

Sigh..

叹..

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

为什么网页不能...更轻巧？

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

有许多方法可以加快页面渲染速度，在此我们可以加快网页渲染速度，我想专注于今日减少的东西 ，我们发送给我们可怜的游客量一个特定的方式。

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

当大小确实很重要，但是我仍然想使用最先进的组件库时，最近我比其他组件库更喜欢Preact 。

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

Preact的好处是它很小！ 将React的109 kb(压缩后的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.

既然我们已经了解了组件库，那么我想向您介绍一个最近受到更多关注的概念：仅CSS框架。

The great thing about CSS only frameworks is that they’re extremely lightweight, and, when built well, allow you to easily customize the CSS framework to tailor exactly to your needs.

仅CSS框架的伟大之处在于它们非常轻巧，并且构建良好时，可让您轻松自定义CSS框架以完全根据您的需求进行定制。

By far my favorite CSS framework 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 example.

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

Enough talk! Let’s build an example project! Let’s install the preact-cli to help us creating 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的新打字稿项目：

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 kind of dependencies as an ordinary “dependency” as you’d just include the entire CSS file, however, we’re gonna 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 ，尽我们最大的努力来App.svelte我们的应用！

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

我们还需要一个sass loader才能导入Bulma库的一部分。

Let’s create a file under the src/style directory and 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，以将Bulma主题按钮添加到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” 。

Quickly glancing over the[https://bulma.io/documentation/elements/button/] (documentation) on buttons for Bulma, it seems like we’ll have to create a simple <button> element and assign it the button class, sounds easy enough! Let’s change our code in src/routes/home/index.tsx to:

快速浏览Bulma按钮上的[ https://bulma.io/documentation/elements/button/ ](文档)，看来我们必须创建一个简单的<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!

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

Let’s put our application to the test and build our application, let’s run the following command to truly squeeze out the smallest blob of code we could 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 )

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

Preact and Bulma: A total size of 23.7 Kilobytes!

Preact和Bulma：总大小为23.7千字节！

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/@thomas.kluiters/battle-of-the-kilobytes-squeezing-out-every-little-byte-in-web-applications-for-the-greater-good-98489143ab5f

大字节与小字节