Unlike WebPack, which relies on Babel-Loader to process code throughout the process, Vite builds using ESBuild during development.
Esbuild is a new code building tool that relies on Go, takes advantage of parallelJS ‘high parallelism, and builds at a frenzied pace (as of May 30).
The ESBuild architecture is extremely easy to understand. It does two things in total, packages dependencies and transforms code, chunks into esModules that are native to the browser, and has the natural advantage of compiling in go, resulting in significant performance improvements for development and builds. Because esBuild assumes by default that the browser developers are using is sufficient to handle stage-4 (including stage-3’s proposal static block fields) syntax, it will not convert it, but at a minimum it will only make the syntax compatible to ES6. This means that projects for B-side users or internal users will have a lighter technical burden to use esBuild, while projects for C-side users will need to consider browser compatibility.
Vite takes advantage of esbuild’s fast packaging and uses esBuild in the development environment and rollup + EsBuild in production builds. As for esbuild not supporting IE11, Vite solved the problem with its plugin system.
Plug-ins included in vite
There are four official plug-ins, namely @Vitejs /plugin-vue, which are used to process vue files and analyze template, style and script in the files into three parts. @vitejs/ plugin-vue-jsX is used to process THE JSX in VUE. Different from React, the JSX plug-in in VUE has vUe-specific attributes such as V-Modal and V-slots. @vitejs/plugin-react-refresh to provide faster partial updates to react by comparing changes The @vitejs/ plugin-Legacy layer is followed by @babel/preset-env after esBuild to be compatible with older browsers that don’t support ESM or IE11.
The community contribution plugin basically meets most of the functions of the Vite ecosystem. However, vite’s plugins aren’t perfect yet. This article summarizes the plugins that Are supported by WebPack but not vite.
Webpack vs. Vite plugins
conclusion
After all, Vite is still a nascent packer, and most teams are still investigating its support. As a result, Vite’s support for custom bundle configurations is still limited, leaving the IgnorePlugin, LimitChunkCountPlugin, and other plugins that Webpack already supports, as a niche for Vite plugins. Common plug-ins can also be found in community-built awesome-Webpack: prerender SPA for frame-independent static sites, for example; Fork TS Checker Webpack Plugin to run the TS code detector in a single process during Webpack startup. The development of these advanced plug-ins will be the next frontier for plug-in developers.
GoGoCode related links
Developing vite plug-ins inevitably involves code transformation, so you can check out our new project, GoGoCode
Github repository for GoGoCode (new project begged star ^_^) github.com/thx/gogocod…
GoGoCode’s official website gogocode. IO /
Play. Gogocode. IO /
Ali mom out of the new tool, to batch modify the project code to alleviate the pain of “GoGoCode actual battle” learn 30 AST code replacement tips 0 cost start AST, with GoGoCode to solve Vue2 Vue3 problem GoGoCode to help clean up the code in the “garbage”
Author: Ice cubes