Vite实战案例：构建快速、高效的现代前端项目

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

Vite是一个快速、简单且高效的前端构建工具，它在开发过程中提供了许多有用的功能和优化。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

在本篇文中，我们将探讨一些Vite项目的实践，包括使用vite-plugin-checker进行类型检查，如何在构建过程中处理TypeScript错误阻止构建成功和阻止生成dist文件，如何进行预览生产包、使用unplugin-auto-import和unplugin-vue-components来提高开发效率，以及如何获取文件路径。我们还演示了如何通过配置优化Vite项目的构建过程，加快构建速度和减小输出文件的体积。这些实践方法将帮助开发者更好地利用Vite，构建更高效、可靠的前端项目。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

实践方法将帮助我们更好地利用Vite的功能、优化和优势，构建高效的现代前端应用。无论是加快开发速度，提高用户体验，还是优化构建输出，Vite都能为我们提供很好的支持。让我们充分发挥Vite的优势，构建出更出色的前端项目吧！文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

项目准备

首先，我们需要安装Node.js和npm（或者yarn）作为项目的开发环境。然后，我们使用以下命令安装Vite：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm install -g create-vite文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

在Vite项目中，我们可以使用ES模块的语法来编写模块化的代码。我们可以创建一个`src`目录，并在其中编写我们的前端代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

在前面的文章《前端开发技术栈（工具篇）：2023深入了解快速开发工具vite的安装和使用（详细）》中我们使用vite已经创建了一个项目，所以接下来的内容将在此基础之上进行演示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

构建项目

在开发过程中，我们可以通过Vite的开发服务器实时预览修改的效果。但是，在部署项目时，我们需要将代码构建为生产环境可用的文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

在命令行中执行以下命令，构建项目：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm run build文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

Vite会将我们的代码编译、压缩，并生成一个或多个bundle文件。这些文件将被放置在`dist`目录下，我们可以将其部署到生产环境中。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

1. 构建（打包）优化

Vite已经对构建过程进行了很好的优化，但通过以下配置，我们还可以进一步优化Vite项目的构建过程、构建速度和减小输出文件的体积，提供更好的用户体验。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

开启懒加载和Chunk分割功能

对于构建速度方面，我们可以使用Vite提供的懒加载和Chunk分割功能。在`vite.config.js`中进行如下配置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

export default {  build: {    rollupOptions: {      output: {        manualChunks: {          vue: ['vue'],          // 添加其他包        }      }    }  }}

如上所示，在`manualChunks`中可以指定需要手动拆分的包，这有助于减小打包后的文件体积和加快加载速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

而对于输出文件的体积方面，我们可以使用压缩和代码分割。在`vite.config.js`中进行如下配置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

import { terser } from 'rollup-plugin-terser';
export default {  build: {    rollupOptions: {      plugins: [terser()],    },  },};

以上配置将使用`rollup-plugin-terser`插件对输出文件进行压缩处理，进一步减小文件体积。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

使用vite-plugin-compression进行分包压缩

vite-plugin-compression是一个Vite插件，可以帮助我们在构建过程中对静态资源进行压缩，并生成gzip和brotli格式的文件。这可以显著减小文件的体积，提高加载速度。以及把一些不常动的包分割出来，比如loadsh、利用浏览器的缓存策略只更新变动的文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

首先，我们需要安装vite-plugin-compression插件：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm install vite-plugin-compression --save-dev文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

然后，在Vite配置文件（vite.config.js）中添加以下代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

import { defineConfig } from 'vite';import compression from 'vite-plugin-compression';
export default defineConfig({  plugins: [    compression({      ext: '.gz', // 生成gzip格式的文件      algorithm: 'gzip', // 使用gzip算法进行压缩    }),    compression({      ext: '.br', // 生成brotli格式的文件      algorithm: 'brotli', // 使用brotli算法进行压缩    }),  ],});

通过以上配置，Vite会在构建过程中自动对静态资源进行压缩，并生成对应的gzip和brotli格式的文件。这样，我们就可以在服务器上启用gzip和brotli压缩，以减小文件的大小，提高加载速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

动态加载

Vite支持动态导入，这意味着我们可以在需要的时候才加载模块，而不是一次性加载所有模块，比如动态路由。这可以减小初始加载的文件大小，提高首屏加载速度。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

在使用动态加载时，我们可以使用import函数来导入模块。例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

const module = import('./module.js');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

Vite会将这个导入语句转换为一个动态加载请求，只有在需要的时候才会加载对应的模块。这样，我们可以根据需要按需加载模块，提高应用的性能。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

CDN加速

使用CDN（内容分发网络）可以加速静态资源的加载速度，减轻服务器的负载。Vite提供了一个配置选项，可以方便地启用CDN加速。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

在Vite配置文件中，我们可以使用`base`选项来指定静态资源的基础路径。例如：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

export default defineConfig({  base: 'https://cdn.example.com/',});

vite-plugin-cdn-import文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

通过以上配置，Vite会将静态资源的URL替换为CDN的URL，从而实现加速加载。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

2. 使用vite-plugin-checker进行类型检查及构建优化

Vite提供了一个名为vite-plugin-checker的插件，可以帮助我们在开发过程中进行TypeScript类型检查。但是默认情况下，该插件并不会检查`.vue`文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

为了解决这个问题，我们首先需要安装`@vitejs/plugin-vue`插件，用于处理Vue单文件组件的解析和编译。执行以下命令安装：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm install --save-dev @vitejs/plugin-vue文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

然后，在`vite.config.js`中配置vite-plugin-checker和@vitejs/plugin-vue：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

import checker from 'vite-plugin-checker';import { createVuePlugin } from '@vitejs/plugin-vue';
export default {  plugins: [    createVuePlugin(),    checker({      typescript: {        diagnosticOptions: {          semantic: true,          syntactic: true,        },      },    }),  ],};

现在，当我们启动Vite开发服务器时，vite-plugin-checker将会检查`.vue`文件中的TypeScript类型错误，并在浏览器控制台中显示错误信息，帮助我们及时发现问题并进行修复。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

或者使用下面的配置方式文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

checker({    // eslint: {    //   // for example, lint .ts and .tsx    //   lintCommand: 'eslint "./src/\*\*/\*.{js,jsx,ts,tsx}"',    // },    typescript: true,    vueTsc: true})

因为npm run dev，vite线程不做类型检查，只做ts语法转译，相当于开启第二个线程做类型检查。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

也可以在dev中使用："dev": "vue-tsc --noEmit && vite",文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

3. 阻止打包成功并不生成dist文件

在开发过程中，我们经常会遇到TypeScript错误。如果我们不处理这些错误，直接进行构建，可能会在生产环境中引发问题。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

为了避免这种情况，我们可以在构建过程中，如果有TypeScript错误发生，阻止打包成功，并且不生成`dist`文件。我们可以使用`npm-run-all`工具来实现这个功能。首先，安装`npm-run-all`：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm install --save-dev npm-run-all文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

然后，在`package.json`中更新`build`脚本如下：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

"scripts": {  "build": "run-p type-check build-production",  "type-check": "tsc --noEmit",  "build-production": "vite build"}

现在，当我们执行`npm run build`时，首先会运行`type-check`脚本进行TypeScript类型检查，如果发现错误，将阻止后续的`build-production`脚本执行，从而避免生成`dist`文件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

或者使用："build": "vue-tsc --noEmit && vite build"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

4. preview预览生产包

在开发过程中，我们经常需要查看生产包的内容，以确保构建的代码在生产环境中运行正常。Vite为我们提供了一个简单的方法来预览生产包。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

首先，我们需要安装`http-server`作为一个开发依赖项：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm install --save-dev http-server文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

然后，在项目根目录下创建一个`preview`脚本，用于启动预览服务器。在`package.json`中添加以下内容：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

"scripts": {文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

"preview": "http-server dist -p 8080"文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

}文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

其中，`-p 8080`表示我们将在本地的8080端口上运行预览服务器，`dist`目录是Vite生成的生产包路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

现在，当我们执行`npm run preview`命令时，会启动一个本地服务器，我们可以在浏览器中访问`http://localhost:8080`来预览生成的生产包。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

5. unplugin-auto-import和unplugin-vue-components

在Vite项目中，我们经常需要导入外部依赖包。为了提高开发效率，我们可以使用unplugin-auto-import和unplugin-vue-components插件。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

unplugin-auto-import可帮助我们自动导入所需的模块（Vue中的API），而不需要手动编写导入语句。避免全量引入的冗余以及每个文件都要手动导入API的低效重复事情。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

首先，安装unplugin-auto-import：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm install --save-dev unplugin-auto-import文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

然后，在`vite.config.js`中进行如下配置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

import { defineConfig } from 'vite';import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({  plugins: [    AutoImport({      imports: [        'vue',        // 添加其他模块      ],    }),  ],});

通过以上配置，我们可以在项目中直接使用`vue`模块，无需手动导入。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

另外，对于Vue项目，我们还可以使用unplugin-vue-components插件。这个插件可以帮助我们自动导入和注册Vue组件，比如element ui、ant-design-vue等。进一步提高开发效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

首先，安装unplugin-vue-components：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

npm install --save-dev unplugin-vue-components文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

然后，在`vite.config.js`中进行如下配置：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

import { defineConfig } from 'vite';import VueComponents from 'unplugin-vue-components/vite';
export default defineConfig({  plugins: [    VueComponents({      dts: true,      resolvers: [        // 添加组件解析器      ],    }),  ],});

以上配置中的`resolvers`可以指定组件解析器，例如通过自动导入的方式解析组件路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

6. 获取文件路径

在开发过程中，有时我们可能需要获取文件的路径。在Vite中，我们可以使用`import.meta.glob`来获取匹配某个模式的多个文件路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

例如，如果我们想获取所有`.md`结尾的文件路径，我们可以使用以下代码：文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

const markdownFiles = import.meta.glob('./*.md');文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

console.log(markdownFiles);文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

`import.meta.glob`返回一个对象，其中的属性为符合模式的文件路径。我们可以通过遍历这个对象来获取所有的文件路径。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

process.cwd() 返回当前工作目录的路径。这个路径是一个字符串，它是Node.js进程从中启动的操作系统中的当前工作目录。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

__dirname 返回当前模块的目录名。这个路径是一个字符串，它代表了当前模块所在的目录的绝对路径。它不包括当前模块的文件名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

__filename 返回当前模块的文件名，包括路径。这个路径是一个字符串，它代表了当前模块的绝对路径。它包括当前模块的文件名。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

这样，我们就可以方便地获取文件路径，并进行后续操作，例如读取文件内容或进行其他处理。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

总结

通过以上实战案例，我们可以看到Vite是一个非常快速、高效的前端项目构建工具。它利用浏览器原生支持ES模块的能力，实现了快速的冷启动和热更新。同时，Vite还提供了简化的配置和开发体验，使得我们可以更加专注于编写高质量的前端代码。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

当然，这只是一个简单的示例。在实际项目中，我们可以结合Vite的其他特性和插件，实现更复杂的功能和需求。希望本文能够帮助你更好地理解和使用Vite，构建出更优秀的前端项目。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

参考资料文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

Vite中文网：https://vitejs.cn/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

Vite官方文档：https://cn.vitejs.dev/文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

大前端专栏文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

https://blog.csdn.net/zhouruifu2015/category_5734911.html文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html

来源：cto plus文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/54326.html