vue+taro3.3+ts打包小程序过大解决方法

已于 2023-11-30 16:59:50 修改
阅读量803 收藏 11
点赞数 10
分类专栏： 问题汇总 文章标签： vue.js 前端 javascript
于 2023-11-30 14:50:32 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45075981/article/details/134712012
版权

1.修改config中的配置

在config下的index.js文件中的mini配置添加opti如下
具体配置链接：Taro 文档

2.看下有无引用过大插件

比如：mount.js要换成day.js
其他没遇到，暂无

3.删除无用的js或者图片，图片最好换成线上链接

如果js文件过大，可以通过接口形式获取文件中的内容
4.分包（具体看各个官方文档）

以下是项目目录

同微信小程序分包流程：使用分包 | 微信开放文档

5.不要随遍引入无用的样式文件和组件，会占用打包资源

KK-夜
关注
  • 10
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【taro react】---- 微信小程序 optimizeMainPackage 优化主包体积大小
止于至善
05-21 844
如果该 module 被多个分包内的 page 引用，正常情况下会被提取到主包的公共模块中，这里为了保证主包的体积最优，则会先提取成一个公共模块，然后分别复制到对应分包的 sub-common 文件夹下（因为小程序无法跨分包引入文件，所以这里需要每个分包都复制一份），需要注意的是，这样会导致总包的体积变大一些。但是注意依赖被多个分包使用时，建议单独处理优化，如果依赖像 classNames 一样小，可以直接提取到主包，如果是像 im 的 UI 依赖一样大，建议还是提取到每个使用的分包中。
【taro react】---- 解决开发环境微信小程序由于主包体积过大不能预览问题
止于至善
05-18 1413
可以配置检测组件中未使用组件，进行删除；检测组件中未使用的方法，进行删除冗余的代码；检测整个程序未使用的css，进行删除。
小程序打包遇到的一系列问题
Programmer555的博客
05-26 309
小程序、打包、上传、分包、小程序码
taro 生产模式 小程序打包 echarts造成vendor.js过大
mumu5532的博客
10-30 525
在config/dev.js中加入以下代码后，运行yarn dev:weapp后，打包体积只有4+m。使用taro build --type weapp。taro 版本3.6.16。
微信小程序关于主包大小不能超过1.5MB的问题
最新发布
℡メ㏑╭ァ小凯
04-26 992
2、进入如图的分析页面，能明确知道你哪个插件包太大，我这里之前echart的包就1mb，现在给他缩减到了500kb的样子。3、解决vant等npm包太大的问题，勾上不上传依赖文件就行。4、这些都无法解决的时候，就弄分包，这个看官方教程即可。1、把资源文件改成远程服务器的，比如png这些。常规的解决办法有以下几种。
Taro3.0 文件体积过大，不能预览的话 如何压缩文件体积？
qq_29263331的博客
08-16 3662
Taro3.0 文件体积过大，不能预览的话 如何压缩文件体积？ 方法一 重新新建一条命令，用watch 来监控 重新build 项目，这样体积会减少一大半 "dev:wexin": "taro build --type weapp -- --watch --env production"
taro+vue3 引入echarts图表后分包，上传时主包体积太大无法上传解决办法
weixin_43209133的博客
08-18 581
3、由于分包引入了echarts, 小程序上传时，分包里的echarts插件被打包到主包的common.js中导致主包体积过大无法上传，这时config下的dev.js 或者index.js添加以下代码，就可以了，打包时分包里的插件打包进了分包。2、app.config.js 添加文件路径。1、新建分包moduleA。
taro预览小程序时打包文件过大
猫老板的豆
01-14 1504
taro 预览微信小程序时打包文件过大，代码包竟有1802KB 提示如下： 解决方法： 在package.json中新增： "scripts": { ... "dev:wxapp": "taro build --type weapp --watch --env production" } 新增后执行：npm run dev:wxapp 此时代码包只有1176KB ...
论一次 taro小程序分包优化经历，小程序体积过大的优化
业余前端的职业经历
01-19 3503
篇幅可能有点长。 感兴趣的童鞋 请耐心看下 都是经验总结哈 由于公司要在小程序上面加上一个聊天的功能 ，选来选去 最后选择了 腾讯的im 由于需要用到的一些功能可能比较新吧。所以优选选择了 最新的sdk 当时代码体积是 1.7M，但是没想到 就这个sdk 就有三四百kb 别说再加上聊天的业务代码了。 然后就开始了 长久的优化缩小 代码体积包的经历 下面就是 意义罗列出来 当时那些减少了体积，最后 保证了不影响现有业务的情况下 把小程序上了。当然空间也只剩下 50kb左右的空间 就溢出。很危险 。 这里
taro 打包文件大于2M
https://shixuebin.gitee.io/hexo-blog/
11-18 464
此时代码包会缩减1倍。
教你解决Taro微信小程序中使用Echarts体积过大的问题
ForeverCjl的专栏
11-06 4692
背景 近期笔者在使用Taro进行微信小程序开发，当引入Echarts图表库时，微信检测单包超限2M的一系列优化措施的踩坑记录，期望能指导读者少走一些弯路。 为什么选择Echarts？ 微信小程序目录市面上使用最多的两款图表库，如下： echarts-for-weixin——echarts微信小程序版本 wx-charts——基于微信小程序的图表库 对比两款图表库优缺点刚好相反。 echarts-for-weixin：功能强大，但体积非常大 wx-charts：功能相对简单，但体积小 由于笔者对ech
vue3+taro+nutui+pina小程序空白框架
03-25
Vue3、Taro、NutUI和Pina是四个在前端开发领域中常用的技术栈，它们在构建微信小程序等移动端应用时发挥着重要作用。下面将详细解释这些技术的特性和应用场景。 1. Vue3：Vue.js 是一个流行的JavaScript前端框架，...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Taro + vue3 +ts + pinia的前端小程序/h5 框架模板
03-22
Taro + vue3 +ts 的前端小程序/h5 的框架模板，其中将request.js 的请求封装好了 使用的数据状态管理时pinia 其中的store 文件都已经建好 手动封装的tabbar 我们可以直接从这个基础上去开发，我们会节省很大的成本，...
react + ts or vue + ts 通用axios封装的方法。
07-21
本篇文章将深入探讨如何在React+TS或Vue+TS项目中对axios进行通用封装，以便更好地管理API请求。 首先，我们了解下什么是axios。Axios是一个基于Promise的HTTP库，它可以在浏览器和node.js中使用。它具有丰富的特性...
基于vue+echarts 数据可视化大屏展示的方法示例
10-15
但这种方式可能导致项目体积过大，因为所有组件都会包含ECharts的代码。 ```javascript import echarts from 'echarts'; Vue.prototype.$echarts = echarts; ``` 2. **按需引入**：这是更推荐的做法，只在需要使用...
taro之--打包体积
m0_74433188的博客
04-02 985
但值得注意，Taro 默认的打包配置是为了让多数项目和需求都可以运行，而不是针对任何项目的最优选择。因此你可以在 Taro 配置的基础之上再针对自己的项目进行优化。在一些情况，我们希望我们的页面只有当用到时才按需进行加载。这种情况在 Taro 应用被称为分包，分包的使用也非常简单，只需要通过配置入口文件。来分析我们依赖打包体积，这个插件会在浏览器打开一个可视化的图表页面告诉我们引用各个包的体积。，如果你不需要那么高的兼容性，或者不需要某些 ES2015+ 语法支持，可以自行配置。配置的，具体来说是使用。
Taro小程序分包
qq_51408649的博客
04-11 785
taro分包
小程序打包体积过大的解决方案
热门推荐
LittleMoon_lyy的博客
06-18 1万+
小程序打包体积过大
taro + vue3 +ts 的小程序项目
07-29
如果你想在 Taro + Vue 3 + TypeScript 的小程序项目中使用 Pinia，你可以按照以下步骤进行配置： 1. 首先，确保你已安装了 Taro 的 Vue 3 模板。你可以使用以下命令创建一个新的 Taro + Vue 3 + TypeScript 项目： ```bash npx @tarojs/cli@next init myApp --template vue3-ts ``` 2. 在项目目录下安装 Pinia： ```bash npm install pinia@2.0.23 ``` 3. 在 `src/main.ts` 文件中，导入 `createPinia` 并创建一个 Pinia 实例，并将其传递给 Vue 的 `createApp` 方法： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' const app = createApp(...) const pinia = createPinia() app.use(pinia) ... ``` 4. 接下来，你可以根据需要创建和使用 Pinia 的 store。在 `src/store` 目录下创建一个新的文件来定义你的 store，例如 `counter.ts`： ```typescript import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++ }, decrement() { this.count-- }, }, }) ``` 5. 在组件中使用 store。在你的组件中，你可以使用 `useStore` 函数来获取 store 的实例： ```typescript import { useCounterStore } from '../store/counter' export default { setup() { const counterStore = useCounterStore() return { counterStore, } }, } ``` 6. 最后，你可以在你的组件中使用 store： ```vue <template> <div> <p>Count: {{ counterStore.count }}</p> <button @click="counterStore.increment()">Increment</button> <button @click="counterStore.decrement()">Decrement</button> </div> </template> <script setup> import { useCounterStore } from '../store/counter' const counterStore = useCounterStore() </script> ``` 这样，你就可以在 Taro + Vue 3 + TypeScript 的小程序项目中使用 Pinia 了。如果你遇到任何问题，请提供更多的上下文和相关代码，我将尽力帮助你解决。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值