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
相关推荐
浮桥1 小时前
vue3实现pdf文件预览 - vue-pdf-embed
前端·vue.js·pdf
AA-代码批发V哥1 小时前
Vue框架之钩子函数详解
vue.js
四季豆豆豆1 小时前
博客项目 laravel vue mysql 第四章 分类功能
vue.js·mysql·laravel
拾光拾趣录2 小时前
Webpack性能优化:10个杀手级提速技巧
前端·webpack·turbopack
拾光拾趣录3 小时前
Vue中v-if与v-for同元素使用的陷阱
前端·vue.js
江城开朗的豌豆6 小时前
退出登录后头像还在?这个缓存问题坑过多少前端!
前端·javascript·vue.js
江城开朗的豌豆6 小时前
Vue的'读心术':它怎么知道数据偷偷变了?
前端·javascript·vue.js
江城开朗的豌豆6 小时前
手把手教你造一个自己的v-model:原来双向绑定这么简单!
前端·javascript·vue.js
我在北京coding6 小时前
el-tree 懒加载 loadNode
前端·vue.js·elementui
江城开朗的豌豆6 小时前
v-for中key值的作用:为什么我总被要求加这个'没用的'属性?
前端·javascript·vue.js