简单修改vue.config.js配置文件,让uniapp 的vue2项目也吃上esbuild的性能,告别带薪编译

Vue面试底层逻辑:响应式原理、Pinia架构与Vite工程真相 Vue响应式系统是前端数据驱动范式的基石,其核心在于依赖追踪与自动更新机制;Proxy替代Object.defineProperty不仅解决了数组索引监听和动态属性响应等技术瓶颈,更体现了现代框架对运行时行为可预测性的工程追求。Pinia的状态管理范式迁移,本质是从中心化约束转向去中心化自治,依托Composition API与Proxy代理实现无感解构与实例隔离;而Vite的‘快’源于按需编译与ESBuild加速,但其构建策略需结合Tree Shaking与手动分块权衡首屏性能。这些设计选择共同指向真实项 阅读详情

本配置在较复杂的跨多端项目中,测试过h5的打包性能和打包效果亲测可用。其他平台未充分测试,使用前请充分测试和考虑风险。

RT,直接上效果图和代码。

带薪编译

处理后

const {ESBuildMinifyPlugin} = require('esbuild-loader');
const {jsPreprocessOptions} = require("@dcloudio/uni-cli-shared");
const path = require("path");
const resolveFn = (dir) => path.resolve(__dirname, dir)

module.exports = {
    chainWebpack: (config) => {

        // 使用 esbuild 编译 js 文件
        const rule = config.module.rule('js');

        // 清理自带的 babel-loader
        //clear是不是有些激进,用下面的会好些吗?挨个删除之类的,不过没时间还是直接clear
        rule.uses.clear();
        // rule.uses.delete('babel-loader');

        // 添加 esbuild-loader
        rule
            .use('esbuild-loader')
            .loader('esbuild-loader')
            // .options({
            //   loader: 'ts', // 如果使用了 ts, 或者 vue 的 class 装饰器,则需要加上这个 option 配置, 否则会报错: ERROR: Unexpected "@"
            //   target: 'es2015',
            //   tsconfigRaw: require('./tsconfig.json')
            // })

		//使条件编译生效
        rule.uses.values().push({
            loader: resolveFn('node_modules/@dcloudio/vue-cli-plugin-uni/packages/webpack-preprocess-loader'),
            options: jsPreprocessOptions
        })


        //下面这个自定义loader纯粹hack,参见node_modules/@dcloudio/vue-cli-plugin-uni/lib/configure-webpack.js的updateJsLoader函数,果然牛逼的公司各不相同
        //这里真是人才,居然需要模拟一个空的名字为babel-loader或者@babel-loader开头的loader才可以通过。而且居然还抛出异常
        rule
            .use('dcloud666888')
            .loader(resolveFn('babel-loader-empty'))

        // 删除底层 terser, 换用 esbuild-minimize-plugin
        config.optimization.minimizers.delete('terser');

        // 使用 esbuild 优化 css 压缩
        config.optimization
            .minimizer('esbuild')
            .use(ESBuildMinifyPlugin, [{minify: true, css: true}]);
    },
    //其他配置
}

附babel-loader-empty.js这空的webpack自定义loader,纯粹是为了满足@dcloudio/vue-cli-plugin-uni他们的奇葩写法。

//直接放在根目录下面和vue.config.js同级即可,想放在其他地方或者做成一个npm包,记得去vue.config.js中修改loader的路径。
module.exports = function (content, map) {
    // console.log('我啥也不干,就是逗dcloud玩')
    return content
}
UniApp之使用vue.config.js的详细教程 UniApp 是一个基于 Vue.js 的跨平台开发框架,允许开发者使用一套代码构建同时运行在多个平台(包括小程序、H5、App)的应用程序。而 vue.config.js 文件是 Vue CLI 提供的配置文件,用于配置构建过程中的各种选项。本教程将详细介绍如何在 UniApp 项目中使用 vue.config.js 文件进行配置。 阅读详情

相关推荐

uniapp小程序分包实战:如何把图片资源从主包剥离(附vue.config.js配置)

本文详细介绍了Uniapp小程序分包实战中如何优化图片资源,通过重构目录结构和使用copy-webpack-plugin将图片从主包剥离,有效解决主包体积膨胀问题。文章还提供了vue.config.js的深度配置指南,帮助开发者实现高效的分包加载策略,提升小程序性能。

http9protocoller的博客 207

UniApp H5 跨域代理配置并使用(配置manifest.json、vue.config.js)

UniApp 运行到浏览器的时候,接口会跨域报错,这里通过两种方式解决,第一:修改Uniapp自带的manifest.json 源码视图并进行配置h5设置。第二:在项目根目录新建vue.config.js并配置代理。二选一即可。修改或调整配置文件后,推荐重新运行,以防不生效。配置完成后,请求接口显示的话,可以试试重启编辑器(尤其是 HBuilderX),再重新运行项目,如果还是不行就另外查查解决方案吧,网上有很多。

风吹落叶的博客 2万+

uni-app Vite配置全解析:从基础到高级实战指南

Vite作为新一代前端构建工具,以其极速的冷启动和热更新能力,在现代前端工程化中扮演着重要角色。其基于原生ES模块的开发服务器原理,彻底改变了传统打包工具的构建范式,为开发者提供了更流畅的开发体验。在跨端开发领域,uni-app框架通过集成Vite构建系统,显著提升了多平台项目的开发效率。本文将深入探讨如何在uni-app项目中配置Vite,涵盖路径别名设置、环境变量管理、插件集成等核心功能,并结合unplugin-auto-import等热词工具,解决实际开发中遇到的构建优化和平台适配问题。通过具体案例演

weixin_33850015的博客 363

uniapp 配置vue.config.js

uniapp是一套基于Vue语法的框架,同样也支持Vue.config.js配置 一般常用的莫过于路径的名称,可以省去繁琐的…/…/ 之类的,不但麻烦而且也不好维护 const path = require('path'); function resolve (dir) { return path.join(__dirname, dir) } module.exports = { ch...

拿回忆下酒 7830

开源项目实操导航:GitHub高价值工具与AI组件落地指南

开源项目是现代软件开发的核心基础设施,其本质是可复用、可验证、可演进的技术资产。理解开源项目的选型原理,关键在于区分‘能跑通’和‘可交付’——前者依赖文档完整性与构建稳定性,后者更看重维护活跃度、安全审计结果与生产环境兼容性。技术价值体现在降低重复造轮子成本、加速AI能力集成、规避许可证风险;典型应用场景包括前端工程提效(如Vue文件上传Demo)、嵌入式低功耗优化(STM32)、专利文本结构化处理、ROS/UniApp跨平台适配等。本文聚焦GitHub上真实可用的实用工具与AI相关项目,基于17天逐项实测

babing2770的博客 465

esbuild-vue:esbuild插件,用于加载和编译Vue 2单文件组件

esbuild-vue 与捆绑在一起时,此插件可让您导入。 该插件可与Vue 2配合使用。 通过使用Node.js的worker_threads并行构建多个Vue导入。 安装 yarn add esbuild-vue 入门 为了使用esbuild插件,您必须使用esbuildJavaScript API,而不是命令行。 假设您有一个Component.vue和一个以某种方式使用它的main.js : # Component.vue <template> <h1>Hello, World!</h1> </template> # main.js import Component from './Component.vue'; import Vue from 'vue'; new Vue({ el: '#app', render: h => h(Component

uniapp 多环境配置(vue.config.js方式,简单上手)

根据npm命令切换多环境的api等变量

qq_43351090的博客 7628

角谱迭代与傅里叶变换迭代算法(GS)的原理及其实例演示分析

角谱迭代与傅里叶变换迭代算法(GS)的原理及其实例演示分析 目前,迭代法和强度传输方程(TIE)法是两类典型的非干涉相位检索技术(Phase Retrieval,被称为相位恢复、相位检索、相位反演法、相位复原等)。迭代法中的经典算法是Gerchberg-Saxton(GS),随后,出现了包括错误减少算法(ER)、混合输入输出法(HIO)、梯度搜索算法、角谱迭代算法等改进算法。...

简单光学 2万+

关于uni-app使用vue.config.js配置文件【配置H5端跨域或其他配置】

参考官方文档:https://uniapp.dcloud.io/collocation/vue-config /** * 关于uni-app使用vue.config.js配置文件的特殊说明: * 1、同时支持manifest.json或vue.config.js配置跨域和其他信息【具体参考uni-app的官方文档】 * 2、优先级 => manifest.j...

weixin_43343144的博客 1万+

避坑指南:英飞凌TC3XX的MCMCAN初始化常见错误及解决方法

本文针对英飞凌TC3XX系列MCU的MCMCAN模块初始化难题,深入剖析了寄存器配置时序、总线监控模式误用、中断映射错误及Message RAM地址冲突四大常见陷阱。通过实战代码示例和诊断流程,提供了清晰的避坑指南和解决方案,帮助嵌入式开发者高效解决CAN FD通信故障,确保汽车电子与工业控制项目的稳定运行。

weixin_29193259的博客 244

UG\NX二次开发 替换部件引用集UF_ASSEM_replace_refset

替换部件引用集UF_ASSEM_replace_refset,需要替换成“完整部件(Entire Part)”需要第三个参数传入空指针或者空字符串。

王牌飞行员_里海的博客 253

uni-app通过vue.config.js在项目中配置跨域代理

其实这个 如果你用nginx去配肯定再好不过 不过 一般大家也都不想把开发环境弄那么复杂 最好还是在项目中配置 那么。这里 其实就是写了个vue的跨域代理 学过vue的朋友对target应该还挺习惯的。我们选择项目跟目录右键 选择 使用命令行窗口打开所在目录。我们右键项目根目录 选择 新建 js文件。然后我们通过代理的 /proxy来发请求。vue.config.js 参考代码如下。叫 vue.config.js。在新弹出的命令行中引入依赖。然后我们的依赖就进来了。

weixin_45966674的博客 1401

使用Matlab simulink的PLC coder功能进行算法搭建与处理

使用的案例如下: Anti-Windup PID Control Demonstration with Feedforward Control 将其中的PID块生成SCL语言再导入TIA 使用的平台如下: Matlab 2019b TIA portal 15.1 应用:可以在PLC中搭载一些并不方便使用的,或者比较难使用的算法 步骤如下: 首先打开案例,案例地址我放在最下面,点击Run运行仿真,必...

苦走一口田 1万+

vue,uniapp解决h5跨域问题

解决跨域问题

一切皆有可能,无畏将来 803

Python爬虫实战:逆向解析腾讯视频API,高效获取结构化视频信息

首先,我们定义期望获取的数据结构,这有助于数据验证和代码清晰度。python"""腾讯视频信息数据模型"""title: str = Field(..., description="视频标题")vid: str = Field(..., description="视频唯一ID")play_count: Optional[int] = Field(None, description="播放量")

2201_76125261的博客 2379

SpringBoot一次请求中缓存数据,请求结束就清除的4种方法,你会几种?

通过以上四种方法,你可以在 SpringBoot 的一次请求中缓存数据,并在请求结束后自动清除这些缓存数据。使用 ThreadLocal:适用于需要跨多个方法调用的缓存数据,灵活性高,但需要注意内存泄漏问题。使用 AOP:适用于全局性的缓存管理,代码更加优雅,但需要对 AOP 有一定的了解。使用 ServletRequestListener:适用于简单的请求生命周期管理,配置简单,但功能相对有限。使用 HttpServletRequest 的 setAttribute 和 getAttribute。

java专栏 1295

3.5 vue-config.js-常用配置【uni-app教程uniapp教程(黄菊华-跨平台开发系列教程)】

3.5 vue-config.js vue.config.js 是一个可选的配置文件,如果项目的根目录中存在这个文件,那么它会被自动加载,一般用于配置 webpack 等编译选项 支持情况  CLI 工程  HBuilderX 2.1.5 及以上版本 注意事项 部分配置项会被编译配置覆盖,例如:  publicPath 不支持,如果需要配置,请在 manifest.json->h5->router->base 中配置  outputDir 不支持  assetsDir 固定 st

杭州.黄老师 2642

如何使用 Conda 安装 Qiskit(详细教程)

本文介绍了使用conda安装Qiskit量子计算工具包的完整流程。首先创建Python 3.10的conda虚拟环境(qiskit_env),然后安装Qiskit核心包及可视化组件(注意Mac用户的安装命令差异)。接着注册IPython内核并测试环境,通过量子电路创建与可视化演示验证安装成功。该教程为量子计算开发提供了简洁的环境配置指南,适合研究者和开发者快速搭建Qiskit开发环境。

猿小白的博客 565

UNIAPP记录less-loader报错,创建vue.config.js解决

1. 方案一:暂时将less版本降到3.0以下(不推荐)起初认为是less版本低的原因。

qq_37194189的博客 830

efm32 入门.pdf

本PDF共计22页,介绍的是操作驱动API,下载与否自己斟酌。

RU DOS版、EFI版32bit/64bit BIOS常用工具

DOS版、EFI版的RU工具,可用来查看IO、MEM、PCI、SMBIOS等资源。亲测在EFI SHELL下可用。

uniApp之网络连接不成功,vue.config.js文件不生效

发现还没有解决网络连接不成功的问题,后面检查发现,是因为没有把之前写的manifest.json文件的web访问代码删掉,它把我的vue.config.js文件覆盖了。把下方H5部分代码删掉,解决问题。发现网络请求还是没有成功,根据网络上的方法为uni增添了一个vue.config.js文件。本人uniApp发起网络请求没有成功,发现了是跨越的问题。首先,我配置了manifest.json文件。把页面标题改为H5,端口改为8080。

fyvhhf的博客 2423

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

uni-app的vue.config.js

招了一个不错的前端走了,其中一个原因说是uni-app没有webpack可以配置自动化,叹惜之余看了vue.config.js,决定搭起。 先是之前一直使用hbuildx运行和发布。 根据项目需求,现已将其转换为使用vue-cli。官网也是推荐使用该方式 hbuildx 互转 vue-lichttps://ask.dcloud.net.cn/article/35750 需要自己重新配置s...

junjiahuang的博客 9856

[性能优化] 使用 esbuild 为你的构建提速

esbuild 是一个强大的工具,希望大家能充分使用起来, 为业务带来更大价值。好了,今天的内容就这么多,希望对大家有所启发。为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。有需要的小伙伴,可以点击下方卡片领取,无偿分享。

郊眠寺 2259

uni-app vue2+webpack -> vue3+vite 相关问题汇总(有感而发)

uni-app的pages.json的模块化,依然采用 require 的方式引入配置信息文件,这是因为他们是编译前处理文件,并不打包入最后的文件中,因而不影响 上述模块规范。三. 生成的路由地址文件需存入pages.json中(之前都放到了 app.json中),且生成路由文件属于node脚本运行,可采用require。二. 环境变量文件 .env .env.prod 变量须以 VITE_ 开头, 且import.meta.env.VITE_ 来使用。所有运行文件,先运行router生成,再编译小程序。

Li_Ning21的博客 2058

uniapp的一些踩坑记录

经排查是由于vite版本过高的问题,运行官方提供的命令npx @dcloudio/uvm后,vite版本降为3.x、esbuild+esbuild-windows-64为0.15.8,问题解决,真的是血坑。通过官方的命令创建的vue3+vite+ts项目,vscode中使用命令运行正常,在hbuildx内运行报错(因为真机运行只能用hbuildx)搜了很多文档,才知道此错误的意思是esbuild与esbuild-windows-64版本对不上(此时vite版本为4.0.2)

云帆的博客 1783

uni-app之使用Vite.config.js配置文件的详细教程

uni-app 是一个基于 Vue.js 的跨平台开发框架,而 Vite 是一个快速的前端构建工具。结合使用 Uni-app 和 Vite 可以提高开发效率和构建速度。本文将详细介绍如何使用 Vite.config.js 配置文件来配置 Uni-app 项目。

码奴一只猿 1万+
上一篇: jenkins踩坑与部分supervisor
下一篇: window10基于WSL,通过ppa快速搭建LNMP环境,打造thinkphp6+swoole+docker开发环境(php8.0,对其他版本也适用)
汪小君
博客等级 码龄12年 120粉丝 94原创
评论 3
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值