解决微信小程序开发vendor.js文件超过500kb问题

1 篇文章 0 订阅

解决办法:

目前查找到有两种解决办法 1.开发环境启用代码压缩、2.vendor.js的分包处理,目前第一种已经达到预期,仅记录下第一种方式.

1.开发环境启用代码压缩

  1. build/webpack.dev.conf.js中加入如下代码,
var UglifyJsPlugin = require('uglifyjs-webpack-plugin') //加入到第一行
new UglifyJsPlugin({ sourceMap: true })//加入到plugins中
  1. 删除dist文件夹,重新编译后可以看出vendor.js文件大约会缩小1/3,这个组件在webpack.prod.conf.js(生产环境) 文件中也被使用了,作用是混淆压缩代码,但是默认的 build/webpack.dev.conf.js(开发环境) 并没有启用,导致文件过大,小程序预览模式打不开,手动把它开启即可!

参考链接:开发环境启用代码压缩
参考链接:打包优化方案

  • 1
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
要减小微信小程序vendor.js 文件大小,可以考虑以下几个方法: 1. 分析依赖:使用工具分析项目依赖关系,检查是否存在冗余或不必要的依赖。删除不需要的依赖项,只保留必要的库和组件。 2. 使用压缩工具:使用压缩工具(如 UglifyJS、Terser)对代码进行压缩和混淆,减小代码体积。 3. 使用 Tree Shaking:如果你使用的是 ES6 模块化语法,可以使用 Tree Shaking 技术来消除未使用的代码。Tree Shaking 可以通过工具(如 webpack)自动检测和删除未被使用的代码块。 4. 使用按需加载:对于一些大型库或组件,可以考虑按需加载的方式,即只在使用时再动态加载。这样可以避免一次性加载全部代码,减少 vendor.js 的大小。 5. 图片优化:对于图片资源,可以使用压缩工具(如 tinypng)对图片进行压缩,减小文件大小。另外,可以选择适当的图片格式,如使用 WebP 格式可以进一步减小图片大小。 6. 使用 CDN 加速:将一些常用的第三方库或资源上传到 CDN(内容分发网络),通过 CDN 加速加载可以提高访问速度,并减少 vendor.js 文件的大小。 7. 定期更新依赖:及时更新第三方库和组件,以获取最新的版本和修复的 bug。新版本通常会对性能进行优化和代码进行精简。 通过以上方法,可以有效减小微信小程序vendor.js 文件大小,提升小程序的加载速度和性能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值