解锁 Vite 插件的潜力：赋能 external 属性，优化构建产物

2023-11-12 10:09:14

Vite 插件：释放 external 潜能

在构建工具的领域里，external 属性已成为一种至关重要的优化手段。通过将某些模块或工具包排除在构建产物之外，我们可以充分利用 CDN 的优势，从而显著减小构建产物的大小。然而，现有的 Vite 插件生态系统中，却鲜有专门针对 external 属性的扩展功能。

本文将带你深入探索如何构建一个 Vite 插件，以赋予 external 属性更强大的能力。通过这个插件，开发者将能够轻松地实现以下目标：

灵活配置 external 选项，根据不同的构建场景定制排除规则
针对不同的模块或工具包，指定不同的 CDN 来源
自动处理模块的版本管理，确保始终加载最新版本

构建 Vite 插件

安装依赖

npm install -D vite

创建插件文件

// external-plugin.js
import { createPlugin, UserOptions } from 'vite'

const externalPlugin = (options: UserOptions = {}) => {
  return createPlugin({
    ...options,
    apply: 'build',
  })
}

export default externalPlugin

定义插件逻辑

在插件的 apply 方法中，我们可以定义插件的具体逻辑：

apply: 'build',
  enforce: 'pre',
  configResolved(config) {
    // 这里可以获取已解析的构建配置
    // ...
  },
  transform(code, id) {
    // 这里可以对代码进行转换
    // ...
  },
}

扩展 external 功能

灵活配置 external 选项

import externalPlugin from './external-plugin.js'

export default defineConfig({
  plugins: [
    externalPlugin({
      external: [
        // 排除规则配置
      ],
    }),
  ],
})

指定 CDN 来源

import externalPlugin from './external-plugin.js'

export default defineConfig({
  plugins: [
    externalPlugin({
      external: [
        {
          // 模块或工具包名称
          name: 'react',
          // CDN 来源
          url: 'https://unpkg.com/react@18.2.0/umd/react.production.min.js',
        },
      ],
    }),
  ],
})

自动版本管理

import externalPlugin from './external-plugin.js'

export default defineConfig({
  plugins: [
    externalPlugin({
      external: [
        {
          // 模块或工具包名称
          name: 'lodash',
          // 自动加载最新版本
          url: 'https://unpkg.com/lodash/',
        },
      ],
    }),
  ],
})