当前位置：首页 > news >正文

Vite 在生产环境下的打包策略

news 来源：原创 2025/5/14 13:46:19

在这里插入图片描述

🤍 前端开发工程师、技术日更博主、已过CET6
🍨 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1
🕠 牛客高级专题作者、打造专栏《前端面试必备》、《2024面试高频手撕题》
🍚 蓝桥云课签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你从入门到实战全面掌握 uni-app》

文章目录

Vite 是一个现代化的前端构建工具，它提供了快速的开发服务器和高效的打包功能。在生产环境下，Vite 使用 Rollup 进行打包，以生成优化的、可部署的静态资源。本文将详细介绍 Vite 在生产环境下的打包策略。

1. 打包流程

Vite 的打包流程主要包括以下几个步骤：

1.1 依赖预构建

在生产环境下，Vite 会预构建项目依赖。Vite 使用 esbuild 进行依赖预构建，将 CommonJS 模块转换为 ES 模块，并缓存构建结果以提高性能。

1.2 代码转换

Vite 使用 Rollup 进行代码转换。Rollup 是一个 JavaScript 模块打包器，它可以将多个模块打包成一个文件。Vite 使用 Rollup 的插件系统来处理各种文件类型，如 JavaScript、CSS、图片等。

1.3 代码优化

Vite 使用 Rollup 的插件系统进行代码优化。例如，可以使用 @rollup/plugin-terser 插件进行代码压缩。

1.4 生成打包结果

最后，Vite 将打包结果输出到指定的目录。默认情况下，打包结果输出到 dist 目录。

2. 打包配置

Vite 的打包配置基于 Rollup 的配置。你可以在 vite.config.js 文件中配置打包选项。以下是一些常用的配置选项：

2.1 入口和出口

你可以通过 build.rollupOptions.input 和 build.rollupOptions.output 配置入口和出口。

// vite.config.js
export default {
  build: {
    rollupOptions: {
      input: 'src/main.js',
      output: {
        dir: 'dist',
        format: 'es'
      }
    }
  }
}

2.2 插件

你可以通过 plugins 选项配置 Rollup 插件。

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()]
});

2.3 代码分割

你可以通过 build.rollupOptions.output.manualChunks 配置代码分割。

// vite.config.js
export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    }
  }
}