打造飞一样的前端:vue3应用打包优化
创始人
2024-04-28 15:59:25
0

目录

    • 前言
    • 优化vue3构建的几点措施
      • 采用CDN
      • 压缩JS
      • 按需加载
        • 按需加载vxe-table
        • 按需加载element-plus
    • 总结

前言

vue3应用上线后,一直受困于加载过慢,昨天终于坐下来做些优化。本想切换到webpack打包,但还是坚持了vite。

优化vue3构建的几点措施

采用CDN

build中配置vue和element-plus为外部依赖:

rollupOptions: {external: ["vue", "element-plus", "vue-demi"],plugins: [dynamicImportVars(),externalGlobals({vue: "Vue","element-plus": "ElementPlus",// 👇 配置 vue-demi 全局变量 👇"vue-demi": "VueDemi",})],},

然后,插件配置里导入相应的CDN:


import { autoComplete, Plugin as importToCDN } from "vite-plugin-cdn-import";
importToCDN({modules: [autoComplete("vue"),autoComplete("axios"),{name: "vue-demi",var: "VueDmi", //根据main.js中定义的来path: "https://npm.elemecdn.com/vue-demi@0.13.11"},{name: "element-plus",var: "ElementPlus", //根据main.js中定义的来path: "https://npm.elemecdn.com/element-plus@2.2.27/dist/index.full.js",css: "dist/index.css"},{name: "@element-plus/icons-vue",var: "ElementPlusIconsVue", //根据main.js中定义的来path: 'https://npm.elemecdn.com/@element-plus/icons-vue@2.0.10/dist/index.iife.min.js'}]}),

这样,构建后,就会自动更新index.html为:







压缩JS

viteCompression({verbose: true,disable: false,threshold: 10240,algorithm: 'gzip',ext: '.gz',}),

需要配合nginx里的gzip配置。

按需加载

按需加载vxe-table

styleImport({libs: [{libraryName: "vxe-table",esModule: true,ensureStyleFile: true,resolveComponent: name => `vxe-table/es/${name}`,resolveStyle: name => `vxe-table/es/${name}/style.css`}]}),

按需加载element-plus

先安装相应插件:

npm install -D unplugin-vue-components unplugin-auto-import

然后配置:

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')module.exports = {// ...plugins: [AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
}

总结

基本就是上述几招了,但实际过程遇到vxe-table打包后的各种错误问题,还得好好研究。随着前端框架的复杂度增加,打包是一个很重要,很严肃的问题。

相关内容

热门资讯

安卓双系统添加应用,轻松实现多... 你有没有想过,你的安卓手机里可以同时运行两个系统呢?听起来是不是很酷?想象一边是熟悉的安卓系统,一边...
pipo安卓进系统慢,探究pi... 最近是不是发现你的Pipo安卓系统更新或者运行起来特别慢?别急,今天就来给你好好分析分析这个问题,让...
怎样使用安卓手机系统,安卓手机... 你有没有发现,安卓手机已经成为我们生活中不可或缺的一部分呢?从早晨闹钟响起,到晚上睡前刷剧,安卓手机...
双系统安卓安装caj,轻松实现... 你有没有想过,你的安卓手机里装上双系统,是不是就能同时享受安卓和Windows系统的乐趣呢?没错,这...
安卓使用ios系统教程,安卓用... 你是不是也和我一样,对安卓手机上的iOS系统充满了好奇?想要体验一下苹果的优雅和流畅?别急,今天我就...
安卓系统gps快速定位,畅享便... 你有没有遇到过这样的情况:手机里装了各种地图导航软件,但每次出门前都要等上好几分钟才能定位成功,急得...
安卓手机系统更新原理,原理与流... 你有没有发现,你的安卓手机最近是不是总在提醒你更新系统呢?别急,别急,让我来给你揭秘一下安卓手机系统...
安卓系统通知管理,全面解析与优... 你有没有发现,手机里的通知就像是一群调皮的小精灵,时不时地跳出来和你互动?没错,说的就是安卓系统的通...
安卓系统手机哪买,揭秘哪里购买... 你有没有想过,拥有一部安卓系统手机是多么酷的事情呢?想象你可以自由安装各种应用,不受限制地探索各种功...
安卓系统 ipv4,基于安卓系... 你知道吗?在智能手机的世界里,有一个系统可是无人不知、无人不晓,那就是安卓系统。而在这个庞大的安卓家...
目前安卓是什么系统,探索安卓系... 亲爱的读者,你是否曾好奇过,如今安卓系统究竟是什么模样?在这个科技飞速发展的时代,操作系统如同人体的...
安卓6.0系统比5.0,从5.... 你有没有发现,自从手机更新了安卓6.0系统,感觉整个人都清爽了不少呢?没错,今天咱们就来聊聊这个话题...
安卓2.36系统升级,功能革新... 你知道吗?最近安卓系统又来了一次大变身,那就是安卓2.36系统升级!这可不是一个小打小闹的更新,而是...
安卓系统源码怎么打开,并可能需... 你有没有想过,安卓系统的源码就像是一扇神秘的门,隐藏着无数的技术秘密?想要打开这扇门,你得掌握一些小...
安卓8.0系统体验视频,智能革... 你有没有听说安卓8.0系统最近可是火得一塌糊涂啊!作为一个紧跟科技潮流的数码达人,我当然要来给你好好...
宣传系统漫画app安卓,探索安... 亲爱的读者们,你是否曾在某个午后,百无聊赖地打开手机,想要寻找一些轻松愉悦的读物?今天,我要给你介绍...
鸿蒙替换安卓系统吗,开启智能生... 你知道吗?最近科技圈里可是炸开了锅,因为华为的新操作系统鸿蒙系统,据说要大举进军手机市场,替换掉安卓...
手机安卓系统深度清理,解锁手机... 手机里的东西是不是越来越多,感觉就像一个装满了杂物的储物柜?别急,今天就来教你一招——手机安卓系统深...
安卓上的windows系统,融... 你有没有想过,在安卓手机上也能体验到Windows系统的魅力呢?没错,这就是今天我要跟你分享的神奇故...
安卓系统焦点变化事件,Andr... 你知道吗?在安卓系统的世界里,最近发生了一件超级有趣的事情——焦点变化事件。这可不是什么小打小闹,它...