Technical Journal · I make the Phoenix fly | use esbuild to accelerate webpack; Netease cloud’s social playing method of acquaintances


Technical Journal · I make the Phoenix fly | use esbuild to accelerate webpack; Netease cloud's social playing method of acquaintances

Dandelion · Jerry Technical Journal Vol.44

Life is endless and learning is the consistent pursuit of many people. Although knowledge is inexhaustible in many fields, every small change can make them go further. As Li Sao said, “I make the Phoenix soar day and night”, and each time I flap my wings, I can fly higher.


Mountaineering is full of love in the mountains, while viewing the sea is full of love in the sea

Accelerating webpack with esbuild

OutlineesbuildIt is a packaging tool written by go. Compared with common packaging tools such as webpack and rollup, it has an absolute advantage in speed. Esbuild loader can be used to compile JS and TS using esbuild in webpack; Compressing scripts and styles gives us the opportunity to have both the ecology of webpack and the compilation speed of esbuild. How fast is it?See what the community says

Recommendation: esbuild has been launched for some time. While everyone is amazed at its speed, it may be affected by historical reasons and can not be really used in work. Using esbuild loader, we can also experience the compilation speed optimization brought by esbuild in webpack project. Especially in the dev environment, when we don’t have high requirements for compilation results and volume, using esbuil loader can greatly improve the compilation efficiency.

Social playing method of acquaintances in Netease cloud

Outline: some time ago, Netease cloud music launched a H5 activity based on the social voting method of acquaintances. The activity divides the grid blocks according to the weight value of the number of votes, and greatly increases the interest through the seamless extrusion dynamic effect between the grid blocks. This paper will focus on how to achieve a stable dynamic lattice block extrusion effect based on treemap (rectangular tree graph) and some problems encountered in it.

Recommendation: this case is a typical scenario for the implementation of the algorithm in the front-end business. From demand analysis, algorithm selection, performance optimization, and finally the further pursuit of “perfect” user experience, all verify the author’s summary that “it is worth pondering, there is something, and the sense of youth will never expire”.

State manager xstate

OutlineXstate is a professional state management library based on finite state machine\
Compared with traditional state management, xstate solves some possible problems, such as confusing state and data, lack of rigor in state transfer, lack of conceptualization and difficult to express, etc\
Xstate is development friendly. Its visualization tool of state diagram can make people see the whole state machine at a glance. In addition, it also provides excellent ecological support, integrating react, Vue, svelte, immer, etc.

Recommendation: during development and design, it is often necessary to consider how to maintain logical states and business processes. Complex states will lead to a sharp increase in maintenance costs\
The state machine has a clear definition of state and state transition, supplemented by extended elements such as hierarchy, concurrency and data, which can manage state very effectively\
Xstate is implemented around the scxml specification related to the state machine and the concept of statecharts. The concept and design are also worth learning.

How does typescript work

OutlineTypescript is an extended language based on JavaScript. It is a superset of JavaScript and adds a static type checking system to JavaScript. This article will briefly explore how typescript works and what tools help it achieve this goal.

Recommendation: at present, most projects have been developed using ts. a little in-depth understanding of the working principle of typescript and related plug-in tools is more conducive to TS playing the greatest role in project development

Liubei Pavilion

Because the divination of mountains and earth is clever, looking at the water is like heaven, and your eyesight is poor

V8 engine in simple terms

OutlineV8The engine is a useC++Write high performanceJavaScriptandWebAssemblyEngine, mainly forChromeBrowser andNodeJS, able to complete compilation / executionJSCode management, memory management, garbage collection, communication with host language, etc.

Recommendation: every front-end student should be rightV8The engine is no stranger. We work with it every dayV8Engine related, if we can be more familiar with the internal principle, it will bring great help to our daily work.

“Dandelion” magazine, updated weekly, we focus on mining “Basic technologyEngineeringCross end frame technologyGraphic programmingServer developmentDesktop developmentartificial intelligenceDesign philosophyFront end frame“And other industry hotspots in many general directions, and give professional interpretation; Not only that, we will also recommend selected concave convex technical articles to show you the research and technical direction of the team.

Looking up, dandelion seeds will take root and sprout, as gorgeous as summer flowers; We climb high and look far into the sea to collect relics, so as to accumulate silicon and walk thousands of miles.

Dandelion · Jerry technical journal contribution Guide

Technical Journal · I make the Phoenix fly | use esbuild to accelerate webpack; Netease cloud's social playing method of acquaintances