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

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

github地址
npm地址

hfex-auto-externals-plugin

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

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

目前支持:

install

bash 复制代码
npm install hfex-auto-externals-plugin -D

or

npx pnpm install hfex-auto-externals-plugin -D

or

npx yarn add hfex-auto-externals-plugin -D

usage

在Vue项目中使用:

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

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

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

js 复制代码
// 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

项目打包

bash 复制代码
npm run build

未使用 hfex-auto-externals-plugin

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

使用 hfex-auto-externals-plugin

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

显然,打包项目的体积已经大幅下降
Vue in vite

js 复制代码
// 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
            })
    ]
})

ts issue

可以使用//@ ts ignore 忽略

effect

build your project

bash 复制代码
npm run build

未使用 before use hfex-auto-externals-plugin

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

使用 after use hfex-auto-externals-plugin

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

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

parameter

Prop Type Default description required
externalsConfig Array<{name:string;exposedField:string;packageLink:string}> [] externalsConfig true
相关推荐
zero13_小葵司3 分钟前
Vue 3 前端工程化规范
前端·javascript·vue.js
Yolanda_20224 分钟前
vue-sync修饰符解析以及切换iframe页面进行保存提示功能的思路
前端·javascript·vue.js
知识分享小能手11 小时前
React学习教程,从入门到精通,React 组件核心语法知识点详解(类组件体系)(19)
前端·javascript·vue.js·学习·react.js·react·anti-design-vue
萌萌哒草头将军12 小时前
Oxc 和 Rolldown Q4 更新计划速览!🚀🚀🚀
javascript·vue.js·vite
Qlittleboy13 小时前
uniapp如何使用本身的字体图标
javascript·vue.js·uni-app
小白菜学前端13 小时前
vue2 常用内置指令总结
前端·vue.js
林_深时见鹿13 小时前
Vue + ElementPlus 自定义指令控制输入框只可以输入数字
前端·javascript·vue.js
椒盐螺丝钉13 小时前
Vue组件化开发介绍
前端·javascript·vue.js
koooo~13 小时前
v-model与-sync的演变和融合
前端·javascript·vue.js
xiaoyan201516 小时前
Electron38-Winchat聊天系统|vite7+electron38+vue3电脑端聊天Exe
vue.js·electron·vite