Vite:下一代前端构建工具的快速上手

简介: Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。

Vite 是由 Vue.js 的作者尤雨溪开发的下一代前端构建工具,它以其快速的冷启动、按需编译和热更新能力而受到广泛关注。Vite 通过利用浏览器原生的 ES 模块导入功能,提供了几乎即时的开发环境启动速度和高度优化的开发体验。

安装 Vite

首先,确保你的系统中已安装 Node.js(推荐使用 LTS 版本)。然后,通过 npm 或 yarn 全局安装 Vite:

npm install -g create-vite
# 或者使用 yarn
yarn global add create-vite

创建新项目

使用 create-vite 命令创建一个新的 Vite 项目。这里以创建一个 Vue 项目为例:

create-vite my-vite-project --template vue
cd my-vite-project

这将初始化一个基于 Vue 3 的 Vite 项目。

开发与运行

在项目根目录下,运行以下命令启动开发服务器:

npm run dev
# 或者使用 yarn
yarn dev

Vite 会立即启动一个本地开发服务器,你可以在浏览器中访问 http://localhost:5173 查看你的应用。Vite 支持热模块替换(HMR),这意味着你在编辑代码时,浏览器页面会实时更新,无需刷新。

构建生产版本

当准备部署应用时,运行以下命令构建生产版本:

npm run build
# 或者使用 yarn
yarn build

这将生成一个优化过的、可用于生产的静态文件夹,通常位于 dist 目录下。

Vite配置

// vite.config.js
import {
    defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue'; // 假设我们使用Vue
import {
    resolve } from 'path';

// 环境变量
const env = process.env.NODE_ENV === 'production' ? 'prod' : 'dev';

export default defineConfig({
   
  // 应用的基础路径
  base: '/my-app/',

  // 项目入口文件
  root: './src',

  // 输出目录
  outDir: 'dist',

  mode: env,
  envPrefix: 'VITE_', // 所有以VITE_开头的环境变量将被注入到import.meta.env中
  envFile: `.env.${
     env}.local`, // 读取对应环境的.env文件

  // 动态导入polyfill
  optimizeDeps: {
   
    include: ['@vue/reactivity'], // 强制包含动态导入的库
  },

  // 服务器配置
  server: {
   
    // 服务器端口
    port: 3000,
    // 是否开启HTTPS
    https: false,
    // 开启热模块替换
    hmr: true,
    // 代理配置,用于API请求转发
    proxy: {
   
      '/api': {
   
        target: 'http://localhost:8000',
        changeOrigin: true,
      },
    },
    middlewareMode: true, // 开启中间件模式
    before(app) {
   
      app.use(async (ctx, next) => {
   
        ctx.body = 'Hello, this is a custom middleware!';
        await next();
      });
    },
  },

  // 构建配置
  build: {
   
    // 生产环境是否压缩代码
    minify: true,
    // 输出目录
    outDir: 'dist',
    // 资源文件存放目录
    assetsDir: 'assets',
    // chunk大小警告阈值
    chunkSizeWarningLimit: 500,
    rollupOptions: {
   
      input: 'src/main.js',
      output: {
   
        manualChunks(id) {
   
          if (id.startsWith('node_modules')) {
   
            return id.toString().replace(/(\.[a-z]+)|[\\/]/g, '_');
          }
        },
      },
    },
  },

  // 预处理器配置,如CSS
  css: {
   
    // CSS模块化
    modules: {
   
      generateScopedName: '[name]_[local]_[hash:base64:5]',
    },
  },

  // 预览环境配置
  preview: {
   
    port: 8080,
  },

  // 插件配置
  plugins: [
    // 可以在这里添加自定义或第三方插件
  ],

  // 解析选项
  resolve: {
   
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
    // 别名配置
    alias: {
   
      '@': '/src',
    },
  },

  // Esbuild配置,用于优化构建速度
  esbuild: {
   
    // 启用/禁用esbuild的tree shaking
    treeShaking: true,
    jsxFactory: 'h',
    jsxFragment: 'Fragment',
  },

  transpileDependencies: ['my-dep'], // 指定需要转译的依赖

  // 额外的Rollup配置
  rollupOptions: {
   
    // 可以在这里添加Rollup的配置项
  },
});

Vite 的核心特性

  • 快速启动:Vite 利用浏览器的原生 ES 模块支持,无需打包即可快速启动开发服务器,显著提升了启动速度。
  • 按需编译:在开发模式下,Vite 只编译你正在查看的模块,大大加快了编辑-刷新的循环。
  • 热模块替换(HMR):Vite 提供了非常快速的 HMR 体验,几乎做到了无缝的实时更新。
  • 配置简单:Vite 的配置文件 vite.config.js 相较于 Webpack 更为简洁,降低了入门门槛。
  • 兼容性良好:Vite 支持多种框架,包括 Vue、React、Preact、Svelte 等,并且可以轻松适配自定义配置。
  • 插件系统:Vite 提供了强大的插件系统,允许开发者扩展其功能,满足特定项目需求。

进阶探索

  • 配置文件:虽然Vite的默认配置已经很强大,但你可以在 vite.config.js 中进行更多定制,如配置代理、别名、CSS预处理器等。
  • Vue DevTools:在开发Vue应用时,确保安装并启用Vue DevTools浏览器扩展,以便更好地调试应用状态。
  • TypeScript支持:如果项目中使用TypeScript,Vite已默认支持,你只需在项目中包含.ts或.tsx文件即可。
  • 优化:学习如何利用Vite的内置优化选项和外部插件,进一步提升应用性能。

2500G计算机入门到高级架构师开发资料超级大礼包免费送!

相关文章
|
1月前
|
前端开发
Github项目分享——免费的画图工具drow,最新前端面试题整理
Github项目分享——免费的画图工具drow,最新前端面试题整理
|
3天前
|
Web App开发 前端开发 网络协议
性能工具之常见压力工具是否能模拟前端
【6月更文挑战7天】性能工具之常见压力工具是否能模拟前端
9 0
|
1月前
|
Web App开发 缓存 前端开发
如何优化前端网页加载速度:最佳实践和工具推荐
本文探讨了如何通过采用最佳实践和利用先进的工具来优化前端网页加载速度。从压缩资源到使用CDN,从减少HTTP请求到利用缓存策略,我们将介绍一系列提高网页性能的技术手段。同时,我们还将推荐一些广受好评的工具,帮助开发者更轻松地实施这些优化策略。
|
1月前
|
缓存 前端开发 JavaScript
如何优化前端性能:最佳实践与工具推荐
在当今互联网时代,用户对网页加载速度和性能的要求越来越高。本文将介绍一些优化前端性能的最佳实践,包括代码压缩、资源合并、懒加载等技术,并推荐一些实用的工具,帮助开发者提升网页加载速度和用户体验。
|
1月前
|
前端开发 持续交付 开发工具
【专栏:工具与技巧篇】版本控制与Git在前端开发中的应用
【4月更文挑战第30天】Git是前端开发中的必备工具,它通过分布式版本控制管理代码历史,支持分支、合并、回滚等操作,促进团队协作和冲突解决。在前端项目中,Git用于代码追踪、代码审查、持续集成与部署,提升效率和质量。优化协作包括制定分支策略、编写清晰提交信息、定期合并清理分支及使用Git钩子和自动化工具。掌握Git能有效提升开发效率和代码质量。
|
1月前
|
Dart 前端开发 开发者
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
【4月更文挑战第30天】Flutter Profiler是用于性能优化的关键工具,提供CPU、GPU、内存和网络分析。它帮助开发者识别性能瓶颈,如CPU过度使用、渲染延迟、内存泄漏和网络效率低。通过实时监控和分析,开发者能优化代码、减少内存占用、改善渲染速度和网络请求,从而提升应用性能和用户体验。定期使用并结合实际场景与其它工具进行综合分析,是实现最佳实践的关键。
【Flutter前端技术开发专栏】Flutter中的性能分析工具Profiler
|
1月前
|
前端开发 数据处理 Android开发
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
【4月更文挑战第30天】本文探讨了Flutter开发中的调试技巧和工具,强调其在及时发现问题和提高效率上的重要性。介绍了基本的调试方法如打印日志和断点调试,以及Android Studio/VS Code的调试器和Flutter Inspector的使用。文章还涉及调试常见问题的解决、性能和内存分析等高级技巧,并通过实际案例演示调试过程。在团队协作中,有效调试能提升整体开发效率,而随着技术发展,调试工具也将持续进化。
【Flutter 前端技术开发专栏】Flutter 中的调试技巧与工具使用
|
1月前
|
监控 前端开发 jenkins
Jenkins在前端项目持续部署中的应用,介绍了Jenkins作为自动化部署工具的基本概念和流程
【4月更文挑战第29天】本文探讨了Jenkins在前端项目持续部署中的应用,介绍了Jenkins作为自动化部署工具的基本概念和流程。前端持续部署涉及代码提交、构建、测试和部署四个步骤。实现过程中需配置代码仓库、构建、测试和部署任务,安装相关插件并确保环境一致性。注意事项包括代码质量控制、环境一致性、监控预警和安全管理。通过Jenkins,可提升前端开发效率和质量,但需不断学习以应对技术发展。
|
1月前
|
前端开发 JavaScript 网络协议
【专栏】探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验
【4月更文挑战第29天】本文探讨了前端性能优化中的 Performance 工具,它能帮助开发者分析页面加载速度和交互体验。通过 Performance,可检测资源加载时间、JavaScript 执行时间、重绘与回流等关键指标,找到性能瓶颈。文中列举了三个实践案例,如优化图片加载、减少 JavaScript 执行时间和避免重绘回流,展示如何利用 Performance 改进页面性能,提升用户体验。开发者应定期使用 Performance 分析并学习新优化技术,以适应Web开发的快速发展。
|
14天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
20 2