Vue 3 웹 어플리케이션 성능 향상
미친 기술자 집
텍스트:https://vueschool.io/articles...
허가 없이 전재하는 것을 엄금한다
출시 예정인 Vue에 대해 알아보겠습니다.js의 세 번째 주요 버전에 대한 정보가 갈수록 많아지고 있습니다.아래의 토론을 통해 비록 그 모든 내용을 완전히 확정할 수는 없지만, 우리는 그것이 현재 버전 (이미 매우 뛰어나다) 에 대한 커다란 개선이 될 것이라고 안심할 수 있다.Vue 팀은 프레임워크 API를 개선하는 데 매우 뛰어나다.유우계는 Vue 3의 목표를 다음과 같이 설명한다.
성능 최적화
성능 괴물로서 어떤 API를 탐구하기 전에 저는 먼저 Vue 3의 성능에 대해 이야기하고 싶습니다.
먼저 Vue 3의 번들 크기부터 시작합니다.
현재 최소화되고 압축된 Vue 런타임 크기는 약 20kB(2.6.10 릴리즈 22.8kB)입니다.Vue 3 번들의 크기는 약 10kB로 절반 정도 줄어들 것으로 예상됩니다.
전역 API tree-shaking
더 나은 모듈화와 같은 많은 다른 최적화 위에 Vue 3 소스 코드는tree-shakeable가 될 것이다.이것은 만약 당신이 그것의 일부 기능을 사용할 수 없다면 (예를 들어
component 또는 v-show 명령어) 이러한 기능은 제품 패키지에 포함되지 않을 것이라는 것을 의미한다.현재 우리가 Vue 핵심의 어떤 기능을 사용하든지 간에 이러한 기능은 최종적으로 우리의 생산 코드에서 사용될 것이다. 왜냐하면 Vue 실례는 하나의 대상으로 내보내지고, 번들 프로그램은 이 대상의 어떤 속성이 코드에서 사용되는지 감지할 수 없기 때문이다. // Vue 2.x - whole `Vue` object is bundled for production
import Vue from 'vue'
Vue.nextTick(() => {})
const obj = Vue.observable({}) // Vue 3.x - only imported properties are bundled
import { nextTick, observable } from 'vue'
nextTick(() => {})
const obj = observable({})Vue.nextTick Vue.observable Vue.version Vue.compile(전체 버전에만 해당)Vue.set(2.x 호환 버전에서만 원인을 빨리 찾을 수 있음)Vue.delete(위와 동일)tree-shake가 가능한 JavaScript API는 한 개가 아닙니다.백그라운드에서 Vue 컴파일러(Vue 템플릿을 렌더링 기능으로 변환하는 도구)는 템플릿에 사용된 명령을 감지하고tree-shake를 실행합니다.예를 들어 다음 템플릿은 다음과 같습니다.
hello
import { h, Transition, applyDirectives, vShow } from 'vue'
export function render() {
return h(Transition, [
applyDirectives(h('div', 'hello'), this, [vShow, this.ok])
])
}프록시 기반 응답
비록 패키지의 크기가 응용 프로그램의 불러오는 시간에 심각한 영향을 줄 수 있지만, 다운로드한 후에도, 패키지는 빨리 렌더링되고 원활하게 실행될 수 있어야 한다.
Vue 핵심 팀은 운영 시 성능이 크게 향상된 이유를 잘 알고 있습니다.
JavaScript Proxies를 기반으로 하는 가장 영향력 있는 시스템부터 시작하겠습니다.현재의 Vue 응답 시스템은
Object.defineProperty 에 기반을 두고 있기 때문에 한계가 있다.가장 흔하고 실망스러운 것은 Vue가 응답 대상의 속성 추가와 삭제를 추적할 수 없다는 것이다.이를 위해 우리는 Vue.set와 Vue.delete를 사용하여 응답 시스템의 정상적인 운행을 유지해야 한다.JS Proxies를 사용하여 우리는 마침내 이런 추악한 해결 방법을 벗어날 수 있게 되었다.// Adding a new property to reacitve object in Vue 2.x
Vue.set(this.myObject, key, value)
// Adding a new property to reactive object in Vue 3
this.myObject[key] = value이러한 개선은 특히 중요하다. 왜냐하면 Vue는 getters/setters를 사용하여 모든 대상과 속성을 반복적으로 훑어보고 전환해야 하기 때문이다.대리인을 사용함으로써 이 과정은 훨씬 쉬워졌다.
특히 Vue 3은 JS Proxies를 사용했기 때문에 Edge가 아닌 Internet Explorer에 대한 지원은 포기하지만 IE 지원을 원하는 사용자에게는 호환성이 유지됩니다.
시간 슬라이스
유우계의 트윗에 따르면 이 기능은 Vue 3에 포함되지 않는다.
Vue 3의 또 다른 흥미로운 성능 기능은 타임 슬라이스에 대한 실험적 지원이지만 거의 언급되지 않았다.
시간 절단이 무엇인지 비유로 설명하다.아이스크림을 사는 팀을 상상해 보세요. 아이스크림은 매우 길어요.그것은 마을에서 가장 좋은 아이스크림이기 때문에, 사람들이 하나하나 사러 간다.어떤 이유로 사용 가능한 입맛에 대한 정보가 없다.이 정보를 얻으려면 아이스크림을 직접 판매하는 여자에게 물어봐야 한다.
이런 상황에서 우리는 아이스크림을 사고 싶은 사람(인내심을 가지고 기다리라고 설득하는 사람)에게 주고, 선택하기 전에 더 많은 맛을 알고 싶은 사람에게 이 정보를 빨리 얻어야 한다는 두 가지 기록을 얻을 수 있다.불행하게도, 아이스크림을 파는 한 여성만 있는데, 그녀는 메인 라인의 모든 고객에게 서비스를 제공하기 전에 어떤 질문에도 대답하지 않을 것이다.
아직 설득되지 않은 고객에게는 최고의 경험이 아니며, 대다수 사람들은 기다릴 가치가 없다는 것을 알게 될 것이다.이 문제를 해결하기 위해 여성은 서비스 대상자 2명에서 3명 중 한 명씩 대답할 수 있다.두 그룹 모두 이 해결 방안에 대해 만족해야 한다.
이것이 바로 CPU가 웹 애플리케이션과 함께 작동하는 방식입니다.우리는 사용자의 상호작용에 응답하기 위해 모든 주요 작업(스크립트, 렌더링 등)을 완성해야 하는'주'대기열을 가지고 있다.일부 페이지에서는 Vue 구성 요소를 로드하거나 다시 렌더링하는 데 걸리는 시간에 따라 사용자 환경이 매우 나빠질 수 있습니다.
더욱 신뢰할 수 있도록 이 스크립트를 평가하고 세그먼트로 자르는 것이 좋습니다. 실행할 때마다 처리할 사용자 입력이 있는지 확인하는 것이 좋습니다.이렇게 하면 렌더링이 필요한 횟수와 재렌더링에 관계없이 프로그램이 응답 상태를 유지합니다.이것이 바로 Vue 3의 작업 방식입니다.
유우계가 뷰3에서 시간분할 기능을 선보이는 방식이다.스크립트 실행 타임라인의 작은 간격을 주의하십시오. 이 간격에서 사용자 입력을 처리할 수 있습니다.
구성 요소를 다시 렌더링하는 이유를 쉽게 파악할 수 있는 기능
공구는 상자를 열면 바로 사용할 수 있는 성능과 동등하게 중요하다.그래서 우리는 Vue 3에서 새로운 생명주기 hook-render Triggered를 볼 수 있다.불필요한 구성 요소를 추적하고 제거하여 다시 렌더링할 수 있으며, 이를 시간 절단과 결합하여 사용하면 운행 시 성능 최적화에 매우 강력한 무기가 된다.
const Component = {
// other properties
renderTriggered (event) {
console.log(`Re-render of ` + this.$options.name + ` component`, event)
}
}위에서 Vue 3에서 본 내용 외에도 많은 것들이 있지만, 이것이 가장 큰 영향을 미칠 수 있다.언급되지 않은 많은 개선 사항은 Vue 컴파일러가 생성한 코드에 숨겨지거나 세부 사항과 알고리즘에 연결되어 있습니다
그러나 다음과 같은 몇 가지 개선 사항이 있습니다.
요약
비록 Vue는 현재 가장 성능이 좋은 프레임워크 중의 하나가 되었지만, 우리는 여전히 제3판에서 중대한 개선을 보게 될 것이다.특히 패키지 크기와 운행 시 성능에 있어서는무수한 미세 최적화도 진행했다.나는 Vue 3이 현대 모바일 우선순위와 성능 가이드의 웹에 매우 적합하다고 생각한다.
Vue가 지역사회에서 완전히 구동되는 유일한 주요 구조라는 것을 잊지 마라.본 문서에 나열된 모든 변경 사항은 RFC 형식으로 커뮤니티와 함께 논의됩니다.핵심 팀을 돕고 효과적인 RFC에 대한 의견을 전달할 수 있으며 개선안을 제시할 수도 있다.우리 함께 Vue를 더 좋게 하자!
다음
다음 기사에서는 새로운 Vue 3 API가 웹 애플리케이션을 작성하는 방식에 어떻게 영향을 미칠지 살펴봅니다.우리는 최근에 유행하는 Composition API를 포함하여 다양한 API를 연구하고 이를 이용하여 더욱 좋고 유지보수가 가능한 코드를 어떻게 만드는지 이해할 것이다.
본문 첫 번째 위챗 공식번호: 전방 선봉
QR코드를 스캔하여 공중번호에 관심을 가지는 것을 환영하며, 매일 당신에게 신선한 전단 기술 문장을 전달합니다.
이 칼럼의 다른 칭찬 문장을 계속 읽는 것을 환영합니다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
Portswigger의 연구실 작성: CSRF 토큰 보호를 사용한 기본 클릭재킹이 견습생 수준 실습에서는 일부 CSRF 토큰 보호가 있음에도 불구하고 클릭재킹에 취약한 웹사이트에서 계정 삭제 흐름을 악용합니다. 주어진 자격 증명으로 로그인하면 계정 페이지로 이동한 후 사용자 계정을 삭제하는 데...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
