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

vue项目打包，使用externals抽离公共的第三方库

news 2025/6/26 19:14:10

封装了一个插件，用来vue打包抽离公共的第三方库，使用unplugin进行插件开发，vite对应的功能使用了vite-plugin-externals进行二次开发

github地址
npm地址

hfex-auto-externals-plugin

自动注入插件,使用 unplugin 和 html-webpack-plugin进行封装

html-webpack-plugin从4.0版本开始引入了getHooks方法，因此项目中使用的html-webpack-plugin版本必须至少为4.0

目前支持:

Webpack
Vite

install

npm install hfex-auto-externals-plugin -Dornpx pnpm install hfex-auto-externals-plugin -Dornpx yarn add hfex-auto-externals-plugin -D

usage

在Vue项目中使用:

我的项目中使用的vue版本是3.3.0

我的项目中使用的vue-router版本是4.1.3

您可以在本网站上搜索有关相应NPM的信息 unpkg

Vue in Webpack

// vue.config.js
const HfexAutoExternalsPlugin = require('hfex-auto-externals-plugin')
const externalsConfig = [{name:'vue',exposedField:'Vue',packageLink:'https://unpkg.com/vue@3.3.0/dist/vue.runtime.global.prod.js'},{name:'vue-router',exposedField:'VueRouter',packageLink:'https://unpkg.com/vue-router@4.1.3/dist/vue-router.global.prod.js'}
]module.exports = {configureWebpack:{plugins:[HfexAutoExternalsPlugin({externalsConfig:externalsConfig})]}
}

effect

项目打包

npm run build

未使用 hfex-auto-externals-plugin

该项目的包装体积效果图如下

before build bundle

使用 hfex-auto-externals-plugin

该项目的包装体积效果图如下

after build bundle

after build net

after build sourse

显然，打包项目的体积已经大幅下降

Vue in vite

// vite.config.ts
import { defineConfig } from 'vite'import HfexAutoExternalsPlugin from 'hfex-auto-externals-plugin/vite'
const externalsConfig = [{name:'vue',exposedField:'Vue',packageLink:'https://unpkg.com/vue@3.3.0/dist/vue.runtime.global.prod.js'},{name:'vue-router',exposedField:'VueRouter',packageLink:'https://unpkg.com/vue-router@4.1.3/dist/vue-router.global.prod.js'}
]export default defineConfig({plugins:[HfexAutoExternalsPlugin({externalsConfig:externalsConfig})]
})