Why Choose Vite
As we started building larger and larger applications, the amount of JavaScript code to process increased exponentially. Large projects with thousands of modules are fairly common. Tools developed based on JavaScript start to hit performance bottlenecks: it usually takes a long time (even minutes!) to start the development server, and even with hot module replacement (HMR), the effect of file modifications takes several seconds to appear. reflected in the browser. Such a cycle goes on and on, and slow feedback will greatly affect the developer's development efficiency and happiness.
Vite aims to solve the above problems by taking advantage of new developments in the ecosystem: browsers start to support ES modules natively, and more and more JavaScript tools are written in compiled languages.
Advantages of Vite
- In the development environment, no packaging operation is required, and it can be cold started quickly.
- Lightweight and fast Hot Reload (HMR).
- True on-demand compilation, no longer waiting for the entire application to be compiled. Traditional webpack compilation: Every time compilation is performed, each route will be found through the entry entry, and then the respective modules of each route will be loaded, and then packaged into a bundle.js file, and finally the server will be notified of the hot update. So in other words, wait for all the files to be loaded before rendering the updated page == "slower
- Vite compilation: Different from the traditional build, vite will prepare the server update first, then find the entry file, and then dynamically find the route to be loaded to compile the module under that route, similar to on-demand loading, with a smaller overall size And update faster.
Vite-Cli quick build project
1. Relevant preparations
- Vite requires Node.js version >=12.2.0. However, some templates require higher Node.js versions to work, please upgrade if your package manager warns you. You can manage multiple versions of Node on the same machine using n, nvm, or nvm-windows. To learn how to install Node.js, see nodejs.org. If you're not sure what version of Node.js is running on your system, run node -v in a terminal window.
- npm package manager Because we usually use the scaffolding provided by Vite to build the project structure, we need to download and install the npm package and npm >= 6. , you need an npm package manager. This guide uses the npm client command-line interface, which is installed by default on Node.js. To check if you have the npm client installed, run npm -v in a terminal window.
2. Create a project
1. Basic creation:
use npm:
npm create vite@latest
Use yarn:
yarn create vite //yarn
Use pnpm:
pnpm create vite
2. Specify the project name and template to use, for example, to build a Vite + Vue project, run:
//项目名：my-vue-app； 模板：vue
npm create vite@latest my-vue-app --template vue // npm 6.x
npm create vite@latest my-vue-app -- --template vue //npm 7+
yarn create vite my-vue-app --template vue //yarn
pnpm create vite my-vue-app -- --template vue //pnpm
3. Start the project
Go to your own project first: cd my-project, then:
npm install
npm run dev