目录
项目准备
构建项目
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`目录下,我们可以将其部署到生产环境中。
Vite已经对构建过程进行了很好的优化,但通过以下配置,我们还可以进一步优化Vite项目的构建过程、构建速度和减小输出文件的体积,提供更好的用户体验。
对于构建速度方面,我们可以使用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插件,可以帮助我们在构建过程中对静态资源进行压缩,并生成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(内容分发网络)可以加速静态资源的加载速度,减轻服务器的负载。Vite提供了一个配置选项,可以方便地启用CDN加速。
在Vite配置文件中,我们可以使用`base`选项来指定静态资源的基础路径。例如:
export default defineConfig({
base: 'https://cdn.example.com/',
});
vite-plugin-cdn-import
通过以上配置,Vite会将静态资源的URL替换为CDN的URL,从而实现加速加载。
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后续的发文,有问题欢迎后台留言交流。
在开发过程中,我们经常会遇到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"
在开发过程中,我们经常需要查看生产包的内容,以确保构建的代码在生产环境中运行正常。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`来预览生成的生产包。
在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`可以指定组件解析器,例如通过自动导入的方式解析组件路径。
在开发过程中,有时我们可能需要获取文件的路径。在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项目构建与开发环境搭建》