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
相关推荐
Aotman_6 小时前
el-input textarea 禁止输入中文字符,@input特殊字符实时替换,光标位置保持不变
前端·javascript·vue.js·前端框架·es6
百思可瑞教育6 小时前
在Vue项目中Axios发起请求时的小知识
前端·javascript·vue.js·北京百思教育
qq_12498707538 小时前
基于node.js+vue的医院陪诊系统的设计与实现(源码+论文+部署+安装)
前端·vue.js·node.js·毕业设计
科兴第一吴彦祖8 小时前
在线会议系统是一个基于Vue3 + Spring Boot的现代化在线会议管理平台,集成了视频会议、实时聊天、AI智能助手等多项先进技术。
java·vue.js·人工智能·spring boot·推荐算法
沙尘暴炒饭9 小时前
前端vue使用canvas封装图片标注功能,鼠标画矩形框,标注文字 包含下载标注之后的图片
前端·vue.js·计算机外设
百思可瑞教育9 小时前
Vue中使用keep-alive实现页面前进刷新、后退缓存的完整方案
前端·javascript·vue.js·缓存·uni-app·北京百思可瑞教育
谢尔登10 小时前
【Webpack】模块联邦
前端·webpack·node.js
前端码虫10 小时前
2.9Vue创建项目(组件)的补充
javascript·vue.js·学习
BillKu10 小时前
Vue3中app.mount(“#app“)应用挂载原理解析
javascript·vue.js·css3
VueVirtuoso12 小时前
SaaS 建站从 0 到 1 教程:Vue 动态域名 + 后端子域名管理 + Nginx 配置
前端·vue.js·nginx