Shulou(Shulou.com)06/03 Report--

This article is about what the Github team successfully reduced the volume of 30kb dependence is, the editor thinks it is very practical, so I share it with you to learn. I hope you can get something after reading this article. Let's take a look at it.

You read it correctly, the Github front-end team spent more than half a year successfully reducing the size of the project dependency package to 30kb.

What's the missing part? jQuery.

Technology or technology debt

Over the years, Github has evolved into a company with hundreds of engineers.

As a large company, some people are divided into performance optimization work.

However, the wolf has more meat and less meat, how can there be so many optimization points?

It's hard to find new performance advantages, and it's not easy to find trouble with your old code.

As a result, the team set its sights on "technical debt".

Lu Xun once said that if the technology used by predecessors prevents future generations from building wheels repeatedly, it will become a technical debt.

So which debt should I choose to pay? jQuery is the perfect choice. The reasons are as follows:

Widely dependent, this change will definitely have a lot of work.

JQuery represents the older generation of web development. Replace it with a trendy one, this contrast is obvious!

It is easy to say that jQuery also has 30kb, although flies are small, they are also meat.

Just do it. Let's assess the workload first.

Workload max max max

The newcomer muttered at this time: "this workload, I estimate a little conservative, gradually replace, a week of development, a week of testing, 2 weeks online?"

The group leader slapped the table: "it has to be a small workshop in 996 to do this!" our big company has to work professionally, and this has to be "iterative step by step, incremental decoupling".

First choice: we have to set up metrics tracking to count the number of jQuery calls in each line of code.

Real-time monitoring to ensure a steady decline in indicators.

Call count

Second, there should be someone to develop a lint (see eslint-plugin-jquery), which can be popularized by the whole team to prevent people from continuing to use the jQuery method.

Endless rules for capturing a screen.

The newcomer asked, "what if someone adds eslint-disable to bypass the rules?"

The group leader smiled. "here we go, young man."

We also have to develop a Github robot that notifies team members whenever someone submits new code that contains eslint-disable rules, so that we can intervene in the review code as soon as possible.

Finally, jQuery is a modular library, and in order to ensure "steady removal", we need to maintain a custom jQuery version.

Whenever it is determined that a module is no longer in use, remove it from the custom version and provide a smaller version.

For example, when you completely replace $.ajax with fetch, you can eliminate the AJAX module.

"after this operation, I don't think we can do it without a half-year workload." The group leader leaned gently against the back of his chair, shook his head gently and said.

Sublimation theme

You think it's over, naive~?

What has been done in front of us can only be said to make steady progress. What comes next is the top priority of KPI.

When jQuery is removed, the project is bound to have a lot of native JS.

Too much repetitive code leads to abstraction and encapsulation, right?

"you mean on the frame! Vue or Angular?" The newcomer replied in a rush.

"small! the pattern is small!" The group leader heaved a long sigh.

"embracing standards, of course. Vue's template syntax is also evolved from the Web Components standard."

"We need to lead! get! when! generation!"

From now on, all reusable functional components are encapsulated as Web Components.

For example, the "copy and paste" function should be encapsulated as clipboard-copy:

Click to copy src/index.js

Following the HTML standard custom, clicking on the clipboard-copy component copies the contents of the id selector pointed to by the for attribute to the clipboard.

Sample code

Concrete realization

And open Shadow DOM, so that the components are closed to the outside, and will not affect other components.

You asked about compatibility? It's small! The pattern is small again!

An enterprise like ours is to promote the progress of browser manufacturers.

Finally, the Web Components component library github-elements with 1.4k star is produced.

After more than half a year of efforts, the Github team successfully eradicated jQuery from the project dependency and reduced the 30kb dependency volume.

If you review the Github page code, you will see Web Component from time to time, such as:

The above is what the Github team has successfully reduced the volume of 30kb dependence, and the editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.