VITE와 웹팩의 차이점은 무엇입니까
- 青灯夜游원래의
- 2023-01-11 14:55:3011528검색
차이점: 1. 웹팩 서버 시작 속도는 vite보다 느립니다. vite는 시작할 때 패키징이 필요하지 않기 때문에 모듈 종속성을 분석하고 컴파일할 필요가 없으므로 시작 속도가 매우 빠릅니다. 2. Vite 핫 업데이트는 Vite의 HRM 측면에서 webpack보다 빠릅니다. 특정 모듈의 내용이 변경되면 브라우저가 모듈을 다시 요청하게 됩니다. 3. Vite는 esbuild를 사용하여 종속성을 사전 구축하는 반면 webpack은 노드를 기반으로 합니다. 4. Vite의 생태계는 웹팩만큼 좋지 않으며, 로더와 플러그인도 충분히 풍부하지 않습니다.
이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.
처음부터 작성
최근
vite가 꽤 인기가 많아서 vue 작성자도 적극 추천합니다vite比较火，而且发布了2.0版本，vue的作者也是在极力推荐在之前的文章里面我提到过，
vite的缺点在于目前的生态不够webpack成熟，但是只要能弥补这个缺点，便有很大概率能替代目前webpack的大部分市场
全方位对比vite和webpack
webpack打包过程
1.识别入口文件
2.通过逐层识别模块依赖。（Commonjs、amd或者es6的import，webpack都会对其进行分析。来获取代码的依赖）
3.webpack做的就是分析代码。转换代码，编译代码，输出代码
4.最终形成打包后的代码
webpack打包原理
1.
先逐级递归识别依赖，构建依赖图谱2.将代码转化成AST抽象语法树
3.在AST阶段中去处理代码
4.把AST抽象语法树变成浏览器可以识别的代码， 然后输出
重点:这里需要递归识别依赖，构建依赖图谱。图谱对象就是类似下面这种
{ './app.js':
{ dependencies: { './test1.js': './test1.js' },
code:
'"use strict";\n\nvar _test = _interopRequireDefault(require("./test1.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(test
1);' },
'./test1.js':
{ dependencies: { './test2.js': './test2.js' },
code:
'"use strict";\n\nvar _test = _interopRequireDefault(require("./test2.js"));\n\nfunction _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }\n\nconsole.log(\'th
is is test1.js \', _test["default"]);' },
'./test2.js':
{ dependencies: {},
code:
'"use strict";\n\nObject.defineProperty(exports, "__esModule", {\n value: true\n});\nexports["default"] = void 0;\n\nfunction test2() {\n console.log(\'this is test2 \');\n}\n\nvar _default = tes
t2;\nexports["default"] = _default;' } }
vite原理
当声明一个 script 标签类型为 module 时
如：
<script type="module" src="/src/main.js"></script>
浏览器就会像服务器发起一个GET
http://localhost:3000/src/main.js请求main.js文件：
// /src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')浏览器请求到了main.js文件，检测到内部含有import引入的包，又会对其内部的 import 引用发起 HTTP 请求获取模块的内容文件
如：
GET http://localhost:3000/@modules/vue.js如：
GET http://localhost:3000/src/App.vueVite的主要功能就是通过劫持浏览器的这些请求，并在后端进行相应的处理将项目中使用的文件通过简单的分解与整合，然后再返回给浏览器，vite整个过程中没有对文件进行打包编译，所以其运行速度比原始的webpack开发编译速度快出许多！
webpack缺点一。缓慢的服务器启动
当冷启动开发服务器时，基于打包器的方式是在提供服务前去急切地抓取和构建你的整个应用。
vite改进
Vite 通过在一开始将应用中的模块区分为 依赖 和 源码 两类，改进了开发服务器启动时间。
依赖 大多为纯 JavaScript 并在开发时不会变动。一些较大的依赖（例如有上百个模块的组件库）处理的代价也很高。依赖也通常会以某些方式（例如 ESM 或者 CommonJS）被拆分到大量小模块中。
Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，并且比以 JavaScript 编写的打包器预构建依赖快 10-100 倍。
源码 通常包含一些并非直接是 JavaScript 的文件，需要转换（例如 JSX，CSS 或者 Vue/Svelte 组件），时常会被编辑。同时，并不是所有的源码都需要同时被加载。（例如基于路由拆分的代码模块）。
Vite 以 原生 ESM 方式服务源码。这实际上是让浏览器接管了打包程序的部分工作：Vite 只需要在浏览器请求源码时进行转换并按需提供源码。根据情景动态导入的代码，即只在当前屏幕上实际使用时才会被处理。
webpack缺点2.使用的是node.js去实现
vite改进
Vite 将会使用
esbuild预构建依赖。Esbuild 使用 Go 编写，并且比以Node.js🎜이전 글에서 앞서 언급했듯이
vite의 단점은 현재 생태계가 webpack을 위한 만큼 성숙하지 않다는 점이지만, 이 단점을 보완할 수 있는 한 높은 장점이 있습니다. 현재 webpack코드>를 대체할 수 있는 가능성 대부분의 시장🎜먼저 종속성을 단계별로 재귀적으로 식별하고 종속성 그래프를 작성합니다.🎜🎜🎜2. 코드를 AST 추상 구문으로 변환합니다. tree🎜 🎜🎜3. AST 단계에서 코드를 처리합니다 🎜🎜🎜4. AST 추상 구문 트리를 브라우저가 인식할 수 있는 코드로 변환한 후 출력합니다 🎜 ul>🎜🎜핵심 포인트: 여기 의존성을 재귀적으로 식별하고 의존성 그래프를 구축하는 것이 필요합니다. 그래프 객체는 다음과 유사합니다 🎜🎜rrreee🎜🎜🎜🎜vite 원칙🎜🎜🎜🎜🎜스크립트 태그 유형을 모듈로 선언하는 경우🎜🎜예: 🎜rrreee🎜🎜🎜브라우저 서버는 GET🎜rrreee🎜🎜🎜를 시작합니다. 브라우저는 main.js 파일을 요청하고, 가져오기에 의해 도입된 패키지가 포함되어 있음을 감지하고, 해당 파일에 대한 모듈을 얻기 위해 HTTP 요청을 시작합니다. 내부 가져오기 참조. GET http://localhost:3000/@modules/vue.js🎜🎜🎜예: GET http:/ /localhost:3000/src/App.vue🎜🎜🎜Vite의 주요 기능은 브라우저에서 이러한 요청을 가로채서 처리하는 것입니다. 따라서 백엔드에서 프로젝트에 사용된 파일은 단순히 분해되어 통합된 후 브라우저로 반환됩니다. Vite는 전체 프로세스 동안 파일을 패키징하고 컴파일하지 않으므로 실행 속도가 원본 보다 훨씬 빠릅니다. webpack 개발 및 컴파일 속도가 매우 빠릅니다. 🎜🎜🎜Webpack 단점 1. 느린 서버 시작🎜🎜🎜🎜🎜 개발 서버를 콜드 스타트할 때 패키저 기반 접근 방식은 전체 애플리케이션을 제공하기 전에 적극적으로 크롤링하고 빌드하는 것입니다. 🎜🎜🎜vite 개선🎜🎜🎜🎜🎜Vite는 처음에 애플리케이션의 모듈을 종속성과 소스 코드로 구분합니다. 두 가지 범주로 개발 서버 시작 시간이 향상되었습니다. 🎜🎜🎜종속성은 대부분 순수한 JavaScript이며 개발 중에 변경되지 않습니다. 수백 개의 모듈이 포함된 구성 요소 라이브러리와 같은 일부 대규모 종속성도 처리 비용이 많이 듭니다. 또한 종속성은 일반적으로 어떤 방식(예: ESM 또는 CommonJS)으로 다수의 작은 모듈로 분할됩니다. 🎜🎜🎜Vite는 esbuild를 사용하여 종속성을 사전 빌드합니다. Esbuild는 Go로 작성되었으며 JavaScript로 작성된 패키저를 사용하여 종속성을 사전 구축하는 것보다 10~100배 빠릅니다. 🎜🎜🎜소스 코드에는 일반적으로 직접 JavaScript가 아니어서 변환이 필요한 일부 파일(예: JSX, CSS 또는 Vue/Svelte 구성 요소)이 포함되어 있으며 자주 편집됩니다. 동시에 모든 소스 코드를 동시에 로드할 필요는 없습니다. (예: 경로 분할을 기반으로 하는 코드 모듈) 🎜🎜🎜Vite는 기본 ESM 모드에서 소스 코드를 제공합니다. 이는 본질적으로 브라우저가 패키저 작업의 일부를 맡게 합니다. Vite는 브라우저가 소스 코드를 요청하고 요청 시 이를 제공할 때만 변환하면 됩니다. 컨텍스트에 따라 동적으로 가져온 코드, 즉 현재 화면에서 실제로 사용될 때만 처리됩니다. 🎜🎜🎜Webpack 단점 2. node.js를 사용하여 구현🎜🎜
🎜🎜🎜vite 개선🎜
🎜🎜🎜🎜Vite는 esbuild를 사용하여 종속성을 사전 빌드합니다. Esbuild는 Go로 작성되었으며 Node.js로 작성된 패키저를 사용하여 종속성을 사전 구축하는 것보다 10~100배 빠릅니다. 🎜
Webpack 치명적인 단점 3. 핫 업데이트가 비효율적이다
패키저 기반으로 시작하면 파일 편집 후 파일 자체가 다시 빌드된다. 분명히 전체 패키지를 다시 빌드해서는 안 됩니다. 왜냐하면 응용 프로그램 크기가 커짐에 따라 업데이트 속도가 급격히 떨어지기 때문입니다.
일부 패키저의 개발 서버는 파일이 변경될 때 모듈 그래프의 일부만 비활성화하면 되도록 빌드를 메모리에 유지하지만[1] 여전히 페이지를 완전히 다시 빌드하고 다시 로드해야 합니다. 이는 비용이 많이 들고 페이지를 다시 로드하면 애플리케이션의 현재 상태가 지워지므로 패키저는 동적 모듈 핫 리로딩(HMR)을 지원합니다. 즉, 페이지의 나머지 부분에 영향을 주지 않고 모듈이 자체적으로 "핫 교체"되도록 허용합니다. 이는 개발 경험을 크게 향상시킵니다. 그러나 실제로는 앱 크기가 커짐에 따라 HMR 업데이트 속도도 크게 떨어지는 것을 발견했습니다.
vite 개선
Vite에서는 HMR이 기본 ESM에서 수행됩니다. 파일을 편집할 때
Vite 只需要精确地使已编辑的模块与其最近的 HMR 边界之间的链失效（大多数时候只需要模块本身），使 HMR 更新始终快速，无论应用的大小.Vite는 또한 HTTP 헤더를 사용하여 전체 페이지의 다시 로드 속도를 높입니다(브라우저가 더 많은 작업을 수행하도록 허용). 소스 코드 모듈 요청은 304 Not Modified에 따라 협상되고 캐시되지만 종속 모듈 요청은 Cache -Control: max-age=31536000,immutable을 통해 강력한 캐싱을 수행하므로 일단 캐시되면 다시 요청할 필요가 없습니다.
Vite 단점 1. 생태학, 생태학, 생태학은 webpack만큼 좋지 않습니다
wepback의 가장 좋은 점은 로더와 플러그인이 엄청 풍부하다는 점인데 생태학은 문제일 뿐이라고 생각합니다 이제 Vite는 그 당시 M1 칩 Mac이 막 나온 것과 비슷합니다. 저는 M1 Mac에 대해 매우 낙관적이었고 주저 없이 구입했습니다. 이제 문제가 없습니다
vite 단점 2. 현재 Rollup
- 을 사용하고 있는 prod 환경 구축
vite 단점 3. 대규모로 사용되지 않았습니다. 그리고 많은 문제나 요구 사항이 실제로 노출되지 않았습니다
요약
- 웹팩 서버는 vite Slow
- Vite는 시작할 때 패키징할 필요가 없기 때문에 모듈 종속성을 분석하고 컴파일할 필요가 없으므로 시작 속도가 매우 빠릅니다. 브라우저가 필요한 모듈을 요청하면 모듈을 컴파일합니다. 이 주문형 동적 컴파일 모드는 프로젝트가 더 크고 파일이 많을수록 Vite의 개발 이점이 더욱 분명해집니다
vite hot update. HRM 측면에서 webpack - vite보다 빠릅니다. 모듈 내용이 변경되면 webpack과 같은 모듈의 모든 종속성을 다시 컴파일하는 대신 브라우저가 모듈을 다시 요청하도록 하세요.
- vite는 esbuild를 사용합니다. Go로 작성) 종속성을 사전 구축하기 위해 webpack은 nodejs를 기반으로 하는데 node
[관련 추천: vuejs video Tutorial
, 🎜웹 프론트엔드 개발🎜]🎜위 내용은 VITE와 웹팩의 차이점은 무엇입니까의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!