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

目录

项目准备

构建项目

1. 构建（打包）优化

开启懒加载和Chunk分割功能

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

动态加载

CDN加速

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

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

4. preview预览生产包

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

6. 获取文件路径

总结

---

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

Vite是一个快速、简单且高效的前端构建工具，它在开发过程中提供了许多有用的功能和优化。

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

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

这些实践方法将帮助我们更好地利用Vite的功能、优化和优势，构建高效的现代前端应用。无论是加快开发速度，提高用户体验，还是优化构建输出，Vite都能为我们提供很好的支持。让我们充分发挥Vite的优势，构建出更出色的前端项目吧！

项目准备

首先，我们需要安装Node.js和npm（或者yarn）作为项目的开发环境。然后，我们使用以下命令安装Vite：

npm install -g create-vite

在Vite项目中，我们可以使用ES模块的语法来编写模块化的代码。我们可以创建一个`src`目录，并在其中编写我们的前端代码。

在前面的文章《前端开发技术栈（工具篇）：2023深入了解快速开发工具vite的安装和使用（详细）》中我们使用vite已经创建了一个项目，所以接下来的内容将在此基础之上进行演示。

构建项目

在开发过程中，我们可以通过Vite的开发服务器实时预览修改的效果。但是，在部署项目时，我们需要将代码构建为生产环境可用的文件。

在命令行中执行以下命令，构建项目：

npm run build

Vite会将我们的代码编译、压缩，并生成一个或多个bundle文件。这些文件将被放置在`dist`目录下，我们可以将其部署到生产环境中。

1. 构建（打包）优化

Vite已经对构建过程进行了很好的优化，但通过以下配置，我们还可以进一步优化Vite项目的构建过程、构建速度和减小输出文件的体积，提供更好的用户体验。

开启懒加载和Chunk分割功能

对于构建速度方面，我们可以使用Vite提供的懒加载和Chunk分割功能。在`vite.config.js`中进行如下配置：

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

如上所示，在`manualChunks`中可以指定需要手动拆分的包，这有助于减小打包后的文件体积和加快加载速度。

而对于输出文件的体积方面，我们可以使用压缩和代码分割。在`vite.config.js`中进行如下配置：

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

以上配置将使用`rollup-plugin-terser`插件对输出文件进行压缩处理，进一步减小文件体积。

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

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

首先，我们需要安装vite-plugin-compression插件：

npm install vite-plugin-compression --save-dev

然后，在Vite配置文件（vite.config.js）中添加以下代码：

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压缩，以减小文件的大小，提高加载速度。

动态加载

Vite支持动态导入，这意味着我们可以在需要的时候才加载模块，而不是一次性加载所有模块，比如动态路由。这可以减小初始加载的文件大小，提高首屏加载速度。

在使用动态加载时，我们可以使用import函数来导入模块。例如：

const module = import('./module.js');

Vite会将这个导入语句转换为一个动态加载请求，只有在需要的时候才会加载对应的模块。这样，我们可以根据需要按需加载模块，提高应用的性能。

CDN加速

使用CDN（内容分发网络）可以加速静态资源的加载速度，减轻服务器的负载。Vite提供了一个配置选项，可以方便地启用CDN加速。

在Vite配置文件中，我们可以使用`base`选项来指定静态资源的基础路径。例如：

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

vite-plugin-cdn-import

通过以上配置，Vite会将静态资源的URL替换为CDN的URL，从而实现加速加载。

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

Vite提供了一个名为vite-plugin-checker的插件，可以帮助我们在开发过程中进行TypeScript类型检查。但是默认情况下，该插件并不会检查`.vue`文件。

为了解决这个问题，我们首先需要安装`@vitejs/plugin-vue`插件，用于处理Vue单文件组件的解析和编译。执行以下命令安装：

npm install --save-dev @vitejs/plugin-vue

然后，在`vite.config.js`中配置vite-plugin-checker和@vitejs/plugin-vue：

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类型错误，并在浏览器控制台中显示错误信息，帮助我们及时发现问题并进行修复。

或者使用下面的配置方式

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

因为npm run dev，vite线程不做类型检查，只做ts语法转译，相当于开启第二个线程做类型检查。

也可以在dev中使用："dev": "vue-tsc --noEmit && vite",

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

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

在开发过程中，我们经常会遇到TypeScript错误。如果我们不处理这些错误，直接进行构建，可能会在生产环境中引发问题。

为了避免这种情况，我们可以在构建过程中，如果有TypeScript错误发生，阻止打包成功，并且不生成`dist`文件。我们可以使用`npm-run-all`工具来实现这个功能。首先，安装`npm-run-all`：

npm install --save-dev npm-run-all

然后，在`package.json`中更新`build`脚本如下：

"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`文件。

或者使用："build": "vue-tsc --noEmit && vite build"

4. preview预览生产包

在开发过程中，我们经常需要查看生产包的内容，以确保构建的代码在生产环境中运行正常。Vite为我们提供了一个简单的方法来预览生产包。

首先，我们需要安装`http-server`作为一个开发依赖项：

npm install --save-dev http-server

然后，在项目根目录下创建一个`preview`脚本，用于启动预览服务器。在`package.json`中添加以下内容：

"scripts": {

    "preview": "http-server dist -p 8080"

}

其中，`-p 8080`表示我们将在本地的8080端口上运行预览服务器，`dist`目录是Vite生成的生产包路径。

现在，当我们执行`npm run preview`命令时，会启动一个本地服务器，我们可以在浏览器中访问`http://localhost:8080`来预览生成的生产包。

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

在Vite项目中，我们经常需要导入外部依赖包。为了提高开发效率，我们可以使用unplugin-auto-import和unplugin-vue-components插件。

unplugin-auto-import可帮助我们自动导入所需的模块（Vue中的API），而不需要手动编写导入语句。避免全量引入的冗余以及每个文件都要手动导入API的低效重复事情。

首先，安装unplugin-auto-import：

npm install --save-dev unplugin-auto-import

然后，在`vite.config.js`中进行如下配置：

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

通过以上配置，我们可以在项目中直接使用`vue`模块，无需手动导入。

另外，对于Vue项目，我们还可以使用unplugin-vue-components插件。这个插件可以帮助我们自动导入和注册Vue组件，比如element ui、ant-design-vue等。进一步提高开发效率。

首先，安装unplugin-vue-components：

npm install --save-dev unplugin-vue-components

然后，在`vite.config.js`中进行如下配置：

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

以上配置中的`resolvers`可以指定组件解析器，例如通过自动导入的方式解析组件路径。

6. 获取文件路径

在开发过程中，有时我们可能需要获取文件的路径。在Vite中，我们可以使用`import.meta.glob`来获取匹配某个模式的多个文件路径。

例如，如果我们想获取所有`.md`结尾的文件路径，我们可以使用以下代码：

const markdownFiles = import.meta.glob('./*.md');

console.log(markdownFiles);

`import.meta.glob`返回一个对象，其中的属性为符合模式的文件路径。我们可以通过遍历这个对象来获取所有的文件路径。

同时在公众号CTO Plus关于Node.js前面的文章：《Node.js几个非常有用的全局对象、全局变量和全局函数详解》中也介绍了几个常用的全局变量、全局函数、全局对象，其中就包括了：process.cwd()，__dirname和__filename，可以用于定位文件或目录，或者在某些情况下，它们可以用于生成文件路径。

更多关于Vue前端相关技术点，敬请关注公众号：CTO Plus后续的发文，有问题欢迎后台留言交流。

process.cwd() 返回当前工作目录的路径。这个路径是一个字符串，它是Node.js进程从中启动的操作系统中的当前工作目录。

__dirname 返回当前模块的目录名。这个路径是一个字符串，它代表了当前模块所在的目录的绝对路径。它不包括当前模块的文件名。

__filename 返回当前模块的文件名，包括路径。这个路径是一个字符串，它代表了当前模块的绝对路径。它包括当前模块的文件名。

这样，我们就可以方便地获取文件路径，并进行后续操作，例如读取文件内容或进行其他处理。

总结

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

当然，这只是一个简单的示例。在实际项目中，我们可以结合Vite的其他特性和插件，实现更复杂的功能和需求。希望本文能够帮助你更好地理解和使用Vite，构建出更优秀的前端项目。

  更多精彩，关注我公号，一起学习、成长

参考资料

Vite中文网：https://vitejs.cn/

Vite官方文档：https://cn.vitejs.dev/

大前端专栏

https://blog.csdn.net/zhouruifu2015/category_5734911.html

 

Vue推荐阅读：

• Vue3进阶：弄清Vue2 和 Vue3的一些区别以及Vue.js和Node.js之间的关系

• Vue进阶：Vue特点和优点介绍，以及开发环境搭建和构建Vue3.0项目的几种方法

推荐阅读：

• 前端开发技术栈（工具篇）：2023最新版nvm的Win/Linux安装和使用（详细） 27.8k stars

• 前端开发技术栈（模板篇）：10款较流行的前端后台管理系统模板

• 50+款前端高效开发辅助工具总结

• 开源项目 | Vue进阶：总结下日常开发中关于Vue的热门开源项目

• 最热门的用于后台管理类产品开发的开源前端框架vue-element-admin-4.4.0的介绍和使用

工具类推荐阅读：

• 《前端开发技术栈（工具篇）：2023最新版nvm的Win/Linux安装和使用（详细）》

• 《前端开发技术栈（工具篇）：2023深入了解快速开发工具vite的安装和使用（详细）》

• 《前端开发技术栈（工具篇）：2023深入了解webpack的安装和使用以及核心概念和启动流程（详细）》

• 《前端开发技术栈（工具篇）：详细介绍npm、pnpm和cnpm分别是什么，使用方法以及之间有哪些关系》

• 《前端开发技术栈（工具篇）：Vue/Node.js项目构建和包管理器npm的使用以及命令详解》

• 《前端开发技术栈（工具篇）：Vite在项目中的一些实践以及vite和webpack的区别，为什么选择Vite》

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

• 《Vue进阶：得心应手的开发体验-基于Pycharm的Vue3项目构建与开发环境搭建》