认识Vue更高效的构建工具Vite

#### 什么是Vite? Vite是一款基于浏览器原生 ES 模块的开发服务器。它利用了浏览器去解析import的方式，在服务端先构建出一个可以直接提供浏览器使用的包，并在此基础上实现了快速的冷启动。 ##### 安装Vite Vite安装非常简单，使用npm即可：`npm install vite` ##### 创建Vite应用程序 使用Vite创建一个Vue项目十分容易。安装Vue Cli最新版本后，可直接通过命令行创建。下面是具体步骤: ```bash $ npm install -g @vue/cli $ vue create hello-vite $ cd hello-vite $ npm install $ npm run dev ``` 通过这些步骤，您将得到一个Vue项目，它已经启动了热重载。 #### 快速开发Vite应用程序 一般情况下，在开发项目时，我们需要下载许多包。利用Vite使此过程更加快速容易。 我们来尝试一下： ```html

HTML

使用Vite下载三方包:

  npm install vue --save

JavaScript

引入包:

  import Vue from 'vue'
  console.log(Vue);

``` #### 生产环境编译Vite应用 一旦你的应用程序准备好部署到生产环境中，你需要打包和压缩所有的代码文件，以便它们能够尽可能快地下载。 在Vite中进行生产环境打包只需一条命令就行： ```bash npm run build ``` 这会生成打包后的代码至dist目录中。 #### Vite的优势 Vite与传统的打包工具相比具有如下优势： 1. 冷启动速度快。Vite利用浏览器本身的能力，快速利用缓存，实现热模块更新，各种网络请求非常快。 2. 模块解析速度快。对于 import 语句（CommonJS 和 AMD 不适用），Vite 采用浏览器原生的 ES 模块解析方式，同时基于文件系统进行了缓存，相对于 Webpack 和 Rollup 等基于 Node.js 解析的工具拥有更快的解析速度。 3. 按需编译，不会打包未使用模块。由于 Vite 知道每个模块的依赖关系，因此可以使用静态分析来确定哪些模块未使用。通过 Vite，未使用的模块不会在最终构建中出现。 4. 简化了配置过程。Vite 不需要任何与代码或构建过程相关的配置。如果您愿意，您可以直接跑起来，无需任何配置，它默认的配置就是足够的。