Introduction to Webpack
Hot update: webpack supports HMR, but webpack needs to be recompiled and updated, which is less efficient
tree-shaking: webpack2 started to support and the elimination effect is not good, but webpack5 has better tree-shaking (remove unused code)
subpackage Aspect: webpack supports code cutting. (subpackage)
ESM packaging: now webpack supports es6module output
Rollup Introduction
Advantages:
Rollup is an ES Modules packager. From the function point of view, Rollup is very similar to Webpack. However, compared to Webpack, Rollup is much smaller, and the files generated by packaging are smaller. (Plugins are required to identify commonJs)
Hot update: Rollup does not support HMR, and its support for modules other than js is not as good as webpack, but if you are packaging pure js libraries such as react and vue in the early stage, it is very appropriate to use rollup, packaged The product is relatively clean, and there are not as many tool functions as webpack.
The plug-in mechanism of Rollup is relatively clean and concise. The resolve/load/transform of a single module is completely decoupled from the packaging link, so Vite can simulate the plug-in mechanism of Rollup during development and is compatible. Most Rollup plug-ins
rollup natively support tree-shaking
Disadvantages:
loading other types of resource files or supporting importing CommonJS modules, or compiling new features of ES, these additional requirements Rollup needs to use plug-ins to complete
rollup and is not suitable for developing applications. Because third-party modules need to be used, most of the third-party modules currently use CommonJs to export members, and rollup does not support HMR, which reduces development efficiency
Introduction
vite is a new front-end building tool that can significantly improve the front-end development experience. It mainly consists of two parts:
A development server that provides rich built-in functions based on native ES modules, such as a fast [Module Hot Update HMR] set of
build instructions, which uses Rollup to package your code, and it is pre-configured and can output
The main features of Vite, an optimized static resource for production environments, are as follows:
Fast cold start: vite will directly start the development server without packaging operations, so there is no need to analyze module dependencies or compile, so the startup speed is very fast
Instant module hot update
True on-demand compilation: use modern browsers Support the features of ES Module. When the browser requests a certain module, it compiles the content of the module according to the needs. This method greatly shortens the compilation
time
. (Fast)
In Vite, HMR is executed on native ESM. When editing a file, Vite only needs to invalidate precisely the chain between the edited module and its nearest HMR boundary, making HMR updates always fast, no matter the size of the application.
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 will be negotiated and cached according to 304 Not Modified, and requests for dependent modules will pass Cache-Control: max -age=31536000,immutable is strongly cached, so once cached they won't need to be requested again.
Hot update principle: In terms of hot module HMR, when modifying a module, you only need to ask the browser to request the module again, instead of compiling all the related dependent modules of the module once like webpack, which is more efficient 2
. Vite is packaged through Rollup in the production environment (feature: small package size), and generates an esm module package. (feature: fast)
When vite is in the development environment, based on the browser supporting esm, let the browser parse the module, and then the server compiles and returns on demand. At the same time, based on esbuild (go), the third package that does not change frequently is pre-built and packaged, and used for caching. (Cache+Fast)
Vite uses esbuild to pre-build dependencies. Esbuild is written in Go and is 10-100x faster than bundler pre-build dependencies written in Node.js.
Disadvantages:
Ecology: The ecology is not as good as webpack, and wepback lies in the fact that loaders and plugins are very rich.
Prod environment construction: Rollup is currently used. The reason is that esbuild is not very friendly to css and code segmentation
and has not been used on a large scale. Many problems or appeals have not been really exposed come out
Conclusion:
Rollup is more suitable for packaging libraries, webpack is more suitable for packaging project applications, and vite realizes hot update based on rollup is also suitable for packaging projects.
————————————————————————————————————————————————————————————————————————————
Extension:
1, webpack life cycle
- Initialize the compiler object with the parameters in the configuration file, and initialize all plugins
- Starting from the entry file, call all loaders to process the module (chain), and then find out the modules that the module depends on for processing
- According to the dependency relationship between the entry and the module, it is assembled into chunks containing multiple modules, and then each chunk is converted into a separate file and added to the output list
- Determine the output path and file name according to the configuration, and write to the file system
- In the above process, Webpack will broadcast a specific event at a specific time point, and the plug-in will execute specific logic after listening to the corresponding event
- When Webpack is running in development mode, every time a file change is detected, a new Compilation is created.