Bytedance has started to “abandon Webpack” and try to use the Vite-like ESmodule building method in its own build tools.

Cause a mass of anxiety below:

  • Is Webpack about to be replaced? Just learn Vite now
  • Webpack hasn’t even learned yet, but there’s a new one!

Some even brought up a trend uVU posted last year: There’s no Webpack anymore.

PS: Recently vite is popular, and released version 2.0, vue author Yu Yuxi is also highly recommended

Full contrast vite and Webpack

Webpack packaging process

1. Identify entry files

2. Identify module dependencies layer by layer. Commonjs, AMD, or ES6 imports are analyzed by WebPack. To get code dependencies)

3. All WebPack does is analyze code. Transform code, compile code, output code

4. Finally form the packaged code

Webpack packaging principles

1. Firstly, identify dependencies step by step recursively and construct dependency maps

2. Convert code into an AST abstract syntax tree

3. Work on the code in the AST phase

4. Turn the AST abstract syntax tree into code that the browser can recognize and output

Important: It is necessary to recursively identify dependencies and build dependency graphs. The atlas object is something like 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; '}}Copy the code

Vite principle

When declaring a script tag of type module

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

The browser will initiate a GET like the server

http:/ / localhost: 3000 / SRC/main. The main js request. Js files:

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

When the browser requests the main.js file and detects that it contains the package imported by import, it sends an HTTP request to its internal import reference to obtain the content file of the module

  • GET http://localhost:3000/@modules/vue.js
  • GET http://localhost:3000/src/App.vue

Vite’s main function is through the browser hijack the requests, and corresponding processing in the back-end will be used in the project file with a simple decomposition and integration, and then returned to the browser, not the packaging on file compiling Vite the process, so its running speed than the original webpack development compilation speed a lot!

Webpack disadvantage # 1: slow server startup

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

Vite improvement

  • Vite improves development server startup times by initially separating application modules into dependent and source modules.
  • The dependencies are mostly pure JavaScript and do not change at development time. Some large dependencies, such as component libraries with hundreds of modules, are also expensive to handle. Dependencies are also often split into a large number of smaller modules in some way (such as ESM or CommonJS).
  • Vite will pre-build dependencies using esBuild. Esbuild is written using Go and is 10-100 times faster than a prepacker-built dependency written in JavaScript.
  • The source code usually contains files that are not directly JavaScript that need to be transformed (such as JSX, CSS, or Vue/Svelte components) and often edited. Also, not all source code needs to be loaded at the same time. (for example, code modules based on route splitting).
  • Vite serves source code in a native ESM way. This essentially lets the browser take over part of the packaging: Vite simply transforms the source code when the browser requests it and makes it available on demand. Code that is dynamically imported according to the situation is only processed if it is actually used on the current screen.

Webpack disadvantage 2: Node.js is used to implement it

Vite improvement

Vite will pre-build dependencies using esBuild. Esbuild is written using Go and is 10-100 times faster than pre-built packager dependencies written in Node.js.

Webpack fatal flaw 3: Hot updates are inefficient

  • When started based on the packer, the file itself is rebuilt after editing it. Obviously, we should not rebuild the entire package, as the update speed would plummet as the application grew in size.
  • Some of the packer’s development servers store the build content in memory, so they only need to inactivate a portion of the module diagram when the file changes [1], but it still needs to rebuild the entire page and reload the page. This is expensive, and reloading the page eliminates the current state of the application, so the packer supports dynamic module hot reload (HMR) : allowing a module to “hot replace” itself without affecting the rest of the page. This greatly improves the development experience – however, in practice we have found that even HMR update rates decrease significantly as the application size increases.

Vite improvement

  • In Vite, HMR is executed on native ESM. When editing a file, Vite only needs to precisely invalidate the chain between the edited module and its nearest HMR boundary (most of the time just the module itself), making HMR updates always fast, regardless of the size of the application.
  • Vite also uses HTTP headers to speed up whole page reloads (again letting the browser do more for us) : requests from source modules are negotiated in the Cache according to 304 Not Modified, while dependent module requests go through cache-control: Max-age =31536000,immutable Strong cache, so once cached they do not need to be requested again.

Vite disadvantage 1: ecology, ecology, ecology not as good as Webpack

The advantage of Wepback is that loader and plugin are very rich, but I think it is only a matter of time for the ecology. The current Vite is more like the M1 chip Mac that just came out at that time. I was very optimistic about M1 Mac and bought it without hesitation

Vite disadvantage 2: Prod environment builds, currently used with Rollup

The reason is that ESBuild isn’t very CSS and code splitting friendly

Vite weakness 3: It has not been used on a large scale, and many problems or appeals have not really been exposed

The real rise of Vite is related to VUE3, when VUE3 is widely used in the production environment, Vite is likely to be gradually accepted

conclusion

1.Vite, just like the M1 chip Mac, has been well said, but not many people bought it at the beginning, worried about ecological problems, and said it was really sweet

2. We believe that vite will shine with the support of vuE3 authors!

3. But Webpack still plays a very important role in front-end engineering today.

4. Vite related ecology is not as complete as Webpack, vite can be used as a development aid.

The last

Recently collected some of the latest front-end big factory interview questions to share zhihu has 30,000 likes! If you want the full PDF you can click on the Blue font to get it for free

Content summary: HTML, HTTP, CSS, JavaScript, TCP, browsers, Vue, React, algorithms, etc

“Like” is the biggest encouragement for me