Vue Weekly Report: Oxlint attacks ESLint dimensionality reduction! You Yuxi’s reflections. Vitest official announcement upgrade

Must-see every week

"Father of Vue" You Yuxi told attendees at the Vue Conference in Toronto that it learned some painful lessons when upgrading Vue 2 to Vue 3.

This boss popularized some details of You Yuxi’s speech and shared some lessons and inspirations from open source library authors when upgrading the framework. For example, when upgrading Vue 2 to Vue 3, the Vue team should coordinate with the Vue ecosystem in a timely manner. Authors of large projects (such as Nuxt and Vuetify) share information.

Oxlint's attack on ESLint dimensionality reduction

Old fans all know that You Yuxi broke the news in his speech at the Vite conference that Vite's front-end infrastructure Rollup will be refactored into Rolldown using Rust. It relies on a major artifact that is known as the fastest JS parser on the planet. Oxc.

The Oxc team officially announced that Oxlint has been officially released. It may be used as a substitute for ESLint in the future. Its performance directly "impacts dimensionality reduction" to ESLint, and the evaluation score is 50-100 times faster than ESLint.

For example, Shopify is a cross-border e-commerce company similar to Taobao and Tmall. The Shopify team reported that the code integration using ESLint originally took more than an hour, but now it only takes 10 seconds to integrate Oxlint.

Yu Da personally evaluated that it only takes 50 milliseconds for Oxlint to run about 600 files, and it only takes 30 milliseconds to rerun it. In the end, Youda commented, "The performance is incredible!"

Vue lovers

Vue parallel request optimization

LCP (largest content draw) and FCP (first content draw) are two key performance indicators that are crucial to excellent UX (user experience) scores.

This expert popularized science on how to combine life cycle hook parallel requests in Vue to achieve parallel component JS file and data requests, reduce the loading time of web pages, and optimize performance bottlenecks.

Vue 3 cache clearing

Browser caching is a powerful optimization technology used to optimize the performance of Web Apps. However, if the server updates the content, it may cause users to view outdated content.

This guy popularized how to resort to HandleCachecomponents to clear the cache. Vue can provide a seamless and up-to-date UX by clearing the cache. This can be achieved based on cached file versioning or content hashing, but you need to pay attention to cache update frequency and dynamic content. .

Cross-frame animation library

AutoAnimate is a zero-configuration, out-of-the-box animation tool library that can add smooth transitions to your Web App and implement animation with just one line of code.

This is a framework-independent JS animation library, so you can make it perfectly linked with JS frameworks such as Vue/React.

Vue charting library

Chart.js is a tool library that provides designers and developers with simple and flexible JS charts.

It vue-chartjsencapsulates Chart.js based on Vue, and you can use it to easily create reusable Vue chart components.

Nuxt lovers

Seven benefits of migrating to Nuxt 3

Vue 2 in the SPA development field has been upgraded to Vue 3, and Nuxt 2 in the SSR field has also been upgraded to Nuxt 3.

This expert popularized the seven major benefits of migrating old projects from Nuxt 2 to Nuxt 3, including but not limited to:

Performance optimization
Better DX (developer experience)
Introducing Vue 3’s combined API

Vite lovers

[email protected] official announcement upgrade

Vitest is a testing framework that natively supports Vite. Even the popular Vue has quietly replaced its test library with Vitest. Fortunately, the up owner is observing in secret.

The Vitest team officially announced that 1.0 has been officially released. For details, please refer to the official upgrade announcement of up main translator and the migration guide of the official document.

If you are interested in unit testing, you can self-study the TDD (Test Driven Development) introductory tutorial previously published by Up Master, which has a collection rate of up to 10%.

Programmer Quotes

This is the famous saying of Tony Hall, the winner of the "Turing Award". You should have written the "quick sort algorithm" invented by him.

The general idea is that there are two major ideas in software architecture design:

One is to make it so streamlined that it is obviously flawless;
The second is to make it complex enough to have no obvious flaws.

Programmer jokes

Mom asked me why I was smiling so happily?

But I can’t complain about 404.

Vue tip: Define combined functions for keyboard shortcuts

I want to show you a convenient Vue composable function that allows you to define keyboard shortcuts in your app. I found it in Nuxt UI, it's called defineShortcuts.

how to use it

Let me first demonstrate how to use it. You can setupdefine shortcuts in functions as follows:

I don't want to repeat the documentation, but let me emphasize a few points:

Shortcuts can _be combined with characters. For example, meta_kthese are the meta key ( on MacOS Command, on other operating systems Control) key and kthe key.
usingInputis a flag that tells the combined function to fire the shortcut if and only if the user is not typing in the input field.
wheneverUsed to add constraints and trigger the shortcut if and only if the constraints are met. For example, you can use , trigger the shortcut whenever: [isActive]if and only isActiveif is .true