What is the difference between vite and webpack

Differences: 1. The webpack server startup speed is slower than that of vite; since vite does not need to be packaged when it is started, there is no need to analyze module dependencies and compile, so the startup speed is very fast. 2. Vite hot update is faster than webpack; in terms of HRM of Vite, when the content of a certain module changes, just let the browser re-request the module. 3. Vite uses esbuild to pre-build dependencies, while webpack is based on node. 4. The ecology of Vite is not as good as webpack, and the loaders and plug-ins are not rich enough.

The operating environment of this tutorial: windows7 system, vue3 version, DELL G3 computer.

Written at the beginning

• The recent vite is quite popular and has released version 2.0. The author of vue is also in Highly recommended

• I mentioned in the previous article that the shortcoming of vite is that the current ecology is not webpack mature enough, but as long as it can By making up for this shortcoming, there is a high probability that it can replace most of the current webpack market

comprehensive comparison between vite and webpack

webpack packaging process

• 1. Identify the entry file

• 2.Pass Identify module dependencies layer by layer. (Commonjs, amd or es6 import, webpack will analyze it. To obtain the dependencies of the code)

• 3. What webpack does is analyze the code. Convert the code, compile the code, and output the code

• 4. Finally form the packaged code

webpack packaging principle

• 1.First recursively identify dependencies step by step and build a dependency graph

• 2. Convert the code into an AST abstract syntax tree

• 3. Process the code in the AST stage

• 4. Convert the AST abstract syntax tree into a browse Code that the processor can recognize, and then output

Key point: Here you need to recursively identify dependencies and build a dependency graph. The graph object is similar to the following

{ './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 principle

• When declaring a script tag type as module

For example:

 <script type="module" src="/src/main.js"></script>

• The browser will initiate a GET

  to the server

http://localhost:3000/src/main.js请求main.js文件：

// /src/main.js:
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

• The browser requests the main.js file, detects that it contains the package introduced by import, and initiates an HTTP request to its internal import reference to obtain the content file of the module.

• For example: GET http://localhost:3000/@modules/vue.js

• For example: # The main function of ##GET http://localhost:3000/src/App.vue

• ##Vite

  is to hijack these requests of the browser. And perform corresponding processing on the backend to simply decompose and integrate the files used in the project, and then return them to the browser. Vite does not package and compile the files during the entire process, so its running speed is faster than the original webpack The development and compilation speed is much faster!

Webpack Disadvantage 1. Slow server startup

When cold starting the development server, the packager-based approach is to eagerly crawl and build your entire application before serving it .

vite improves

Vite by distinguishing the modules in the application into Both dependency and source code categories improve the development server startup time.
Dependencies are mostly pure JavaScript and will not change during development. Some larger dependencies (such as component libraries with hundreds of modules) are also expensive to deal with. Dependencies are also usually split into a large number of small modules in some way (such as ESM or CommonJS).
Vite will use esbuild to pre-build dependencies. Esbuild is written in Go and is 10-100 times faster than pre-building dependencies with packagers written in JavaScript.
Source code usually contains some files that are not directly JavaScript and need to be converted (such as JSX, CSS or Vue/Svelte components), and are often edited. At the same time, not all source code needs to be loaded at the same time. (e.g. code modules based on route splitting).
Vite serves source code in native ESM mode. This essentially lets the browser take over part of the packager's work: Vite only needs to transform when the browser requests source code and serve it on demand. Code that is dynamically imported based on context, that is, will only be processed when actually used on the current screen.

Webpack Disadvantages 2. Use node.js to implement

vite improvements

Vite will use
• esbuild

  pre-built dependencies. Esbuild is written in Go and is 10-100 times faster than pre-building dependencies with packagers written in Node.js.

Fatal disadvantage of webpack 3. Hot update is inefficient

• When started based on the packager, edit After the file the file itself will be rebuilt. Obviously we shouldn't rebuild the entire package, because then the update speed will plummet as the application size grows.

• Some packager development servers keep the build in memory so that they only need to deactivate part of the module graph when files change[1], but it also still requires the entire Rebuild and reload the page. This is expensive, and reloading the page erases the current state of the application, so the packager supports dynamic module hot reloading (HMR): allowing a module to "hot replace" itself with no impact on the rest of the page. This greatly improves the development experience - however, in practice we found that even HMR update speeds dropped significantly as the app size grew.

vite improvements

• ##In Vite, HMR is performed on the native ESM . When editing a file,

  Vite only needs to invalidate exactly the link between the edited module and its nearest HMR boundary (most of the time just the module itself), making HMR updates always fast, no matter the size of the app.

• Vite also uses HTTP headers to speed up the reloading of the entire page (again letting the browser do more for us): requests for source code modules are negotiated and cached according to 304 Not Modified, Dependent module requests will be strongly cached through Cache-Control: max-age=31536000, immutable, so once they are cached they will not need to be requested again.

vite Disadvantages 1. Ecology, ecology, ecology is not as good as webpack

• wepback awesome The advantage is that loaders and plugins are very rich, but I think the ecology is only a matter of time. The current Vite is more like the M1 chip Mac that just came out at that time. I was very optimistic about the M1 Mac and bought it without hesitation. Now there is no problem.

vite Disadvantages 2. The construction of prod environment, currently using Rollup

• Reasons The reason is that esbuild is not very friendly to CSS and code splitting

##vite Disadvantage 3. It has not been used on a large scale, and many problems or demands have not been really exposed

The day Vite really rises is related to vue3. When vue3 starts to be widely used in production environments, there is a high probability that Vite will be gradually adopted by everyone. Started to accept

Summary

##The webpack server starts slower than vite

• Since Vite does not require packaging when starting, there is no need to analyze module dependencies and compile, so the startup speed is very fast. When the browser requests the required module, it compiles the module. This on-demand dynamic compilation mode greatly shortens the compilation time. When the project is larger and the files are more, Vite's development advantages become more obvious
  vite hot update is faster than webpack
• vite In terms of HRM, when the content of a certain module changes, just let the browser re-request the module, instead of re-requesting the module like webpack Recompile all dependencies of this module;
  vite uses esbuild (written in Go) to pre-build dependencies, while webpack is based on nodejs, which is 10-100 times faster than node

• vite ecology is not as good as webpack, and the loaders and plug-ins are not rich enough

• [Related recommendations:
vuejs video tutorial

,

web front-end development】

The above is the detailed content of What is the difference between vite and webpack. For more information, please follow other related articles on the PHP Chinese website!