vite打包工具的简单使用

vite打包工具的简单使用

Vite 是一个由 Vue.js 核心团队开发的现代前端构建工具，它专注于提供更快的开发体验和高效的构建性能。Vite 利用 ES 模块的原生支持，实现了即时编译和热模块替换（HMR），并且在构建时采用 Rollup 来优化最终输出。

Vite 的基本配置
Vite 的配置文件是 vite.config.js 或者 vite.config.ts（如果你使用 TypeScript）。在这个文件中，你可以定义一系列的配置选项，包括但不限于以下几点：

1. 服务器配置
   server 对象可以用来配置开发服务器，比如 host, port, open, proxy 等。
2. 构建配置
   build 对象允许你配置构建输出，如 outDir, assetsDir, rollupOptions, minify, chunkSizeWarningLimit 等。
3. 插件
   plugins 数组可以包含任何 Vite 插件，用于扩展或修改构建流程。
4. 优化配置
   optimizeDeps 可以用来优化依赖，例如 include 和 exclude 控制哪些依赖会被优化。

Vite 打包优化策略
Vite 的优化主要是围绕以下几个方面：

1. 代码拆分
   利用动态导入 (import()) 实现代码分割。
   使用 rollupOptions 中的 output 和 input 来控制输出和输入配置，进一步优化代码拆分。
2. 资源压缩
   使用 Terser 或其他插件来压缩 JavaScript。
   使用 html-minifier-terser 或类似插件压缩 HTML。
   使用 imagemin 插件来压缩图像资源。
3. 缓存利用
   Vite 内置的 HMR 和增量构建可以减少构建时间。
   使用 .vite 目录下的缓存文件来加速后续构建。
4. 构建配置
   通过 rollupOptions 配置来排除不需要打包的外部依赖。
   调整 chunkSizeWarningLimit 来调整警告的 chunk 大小限制。
5. 按需加载
   使用插件来实现第三方库的按需加载，比如 lodash-es 和 babel-plugin-import。
6. 路径别名
   配置 resolve.alias 来简化和标准化模块导入路径。
7. CDN 加速
   将一些稳定的外部依赖通过 CDN 加载，而不是打包进项目中。
8. 分析工具
   使用 @rollup/plugin-analyzer 或类似插件来分析打包后的文件大小分布，帮助识别优化点。

示例：
vite.config.js 配置示例

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

export default defineConfig({
  plugins: [vue()],
  build: {
    outDir: 'dist',
    assetsDir: 'static',
    rollupOptions: {
      external: ['lodash', 'moment'],//lodash 和 moment 这两个模块将不会被包含在最终的 bundle 中
      input: {
        main: './index.html',
      },
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString();
          }
        }
      }
    },
    minify: true,
    chunkSizeWarningLimit: 1000
  },
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
      },
    },
  },
   resolve: {//用于控制模块解析的行为
    extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx'],
    alias: {//是一个键值对对象，用于定义模块导入路径的别名
      '@': '/src',
      '~': '/node_modules'
    },
    conditions: ['node', 'browser'],//允许你指定在模块解析时使用的条件
    mainFields: ['module', 'browser', 'main'],//是一个优先级列表，用于确定从包的 package.json 文件中读取哪个字段作为主入口
    preserveSymlinks: false,//是否保留符号链接
  },
});