Technical Journal · Wu Lingfeng Bird Fei Teng Xi | Use esbuild to accelerate webpack; Netease Cloud's acquaintance social game...

Dandelion·JELLY Technical Journal Vol.44

Life is endless and learning is endless. This is the consistent pursuit of many people. Although knowledge is inexhaustible in many fields, every small change can make oneself go further, just like what Li Sao said, " I make the phoenix fly soaring, followed by day and night." Every time it flaps its wings, it can fly higher.

Guanhaizhi

Mountain climbing is full of love in the mountains, while watching the sea is overflowing in the sea

Use esbuild to accelerate webpack

Synopsis : esbuild is a packaging tool written in go. Compared with common packaging tools such as Webpack and Rollup, it has an absolute advantage in speed. esbuild-loader can be used in Webpack to use esbuild to compile JS and TS; compress scripts, styles, etc., so that we have 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 a certain period of time. While everyone is amazed by its speed, it may be affected by historical reasons and there is no way to really use it in work. Using esbuild-loader, we can also experience the compilation speed optimization brought by esbuild in the 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 compilation efficiency.

NetEase Cloud's acquaintance social gameplay

Synopsis : Some time ago, NetEase Cloud Music launched an h5 event based on acquaintance social voting. This event divides the grid blocks according to the weight of the number of votes, and greatly increases the dynamic effect by seamlessly squeezing between the grid blocks Interesting. This article will focus on how to achieve a stable dynamic grid block extrusion effect based on treemap (rectangular tree map) and some of the 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, to algorithm selection, to performance optimization, and finally the pursuit of "perfect" user experience, it verifies the author's summary. "It's worth pondering, there is something, and the youthfulness never expires."

State management tool XState

Synopsis : XState is a professional state management library based on a finite state machine. \
Compared with traditional state management, XState solves some problems that may exist, such as confusion of state and data, insufficient state transition, and lack of conceptualization that are difficult to express. \
XState is development friendly. Its state diagram visualization tool allows people to see the overall state machine at a glance. In addition, it also provides excellent ecological support, integrating React, Vue, Svelte, Immutable Data Immer, etc.

Recommendation : When developing and designing, it is often necessary to consider how to maintain the logical state and business processes. The complex state will lead to a sharp increase in maintenance costs. \
The state machine has a clear definition of state and state transition, supplemented by extension elements such as hierarchy, concurrency, and data, which can manage state very effectively. \
XState is implemented around the SCXML specification and Statecharts concept related to the state machine, and the concept and design are also worth learning.

How does TypeScript work?

Synopsis : TypeScript is a language based on JavaScript extensions. It is a superset of JavaScript and adds a static type checking system to JavaScript. This article will discuss briefly how TypeScript works and what tools are there to help it achieve this goal.

Recommendation : Currently, 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 to play its maximum role in project development.

Liuzouting

Because of Shanbu’s ingenuity, he has poor eyesight looking at the water like the sky

V8 engine in a simple way

Synopsis : V8 engine is a use C ++ written in high-performance JavaScript and webassembly engine, a major role in Chrome browser and NodeJS , can compile / execute JS code Manage memory, responsible for garbage collection, communication with the host language, etc.

Recommendation : Every front-end student should be V8 engine. Our daily work is related to the V8 engine. If we can be more familiar with the internal principles, it will bring great significance to our daily work. Big help.

"Dandelion" journal, a weekly update, we focus on mining " underlying technology , engineering , cross-end framework technology , graphics programming , server development , desktop development , Artificial Intelligence , design philosophy , front-end frame " and many other industry hotspots, and professional interpretation; not only that, we will also recommend selected concave-convex technical articles to show everyone the research direction of the team.

Looking up, the seeds of dandelion will take root and sprout, like summer flowers; to learn from things, we climb high and overlook the sea, and we will reach thousands of miles in order to accumulate silicon.

Dandelion·JELLY Technical Journal Contribution Guide