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

目录

项目准备

构建项目

1. 构建(打包)优化

开启懒加载和Chunk分割功能

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

动态加载

CDN加速

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

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

4. preview预览生产包

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

6. 获取文件路径

总结


Vite实战案例:构建快速、高效的现代前端项目_第1张图片

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

Vite实战案例:构建快速、高效的现代前端项目_第2张图片

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

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

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

Vite实战案例:构建快速、高效的现代前端项目_第3张图片

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

项目准备

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

npm install -g create-vite

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

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

Vite实战案例:构建快速、高效的现代前端项目_第4张图片

构建项目

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

在命令行中执行以下命令,构建项目:

npm run build

Vite实战案例:构建快速、高效的现代前端项目_第5张图片

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后续的发文,有问题欢迎后台留言交流。

Vite实战案例:构建快速、高效的现代前端项目_第6张图片

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后续的发文,有问题欢迎后台留言交流。

Vite实战案例:构建快速、高效的现代前端项目_第7张图片

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项目构建与开发环境搭建》

 

你可能感兴趣的:(#,Vue,前端)