GraceLeeau
GraceLeeau
  • 发布:2020-03-16 15:54
  • 更新:2024-12-13 17:08
  • 阅读:39647

解决uni-app编译后vendor.js文件过大

分类:uni-app

背景与现象

  • 将一个当前只有简单功能的H5项目(通过vue-cli 3 创建) 迁移为uni-app版本,需要支持输出为QQ小程序、H5,在QQ小程序开发者工具中,发现无法生成预览和真机调试,原因是代码包超过2M,经过分析,发现编译后代码中,最大的是:common/vendor.js,一些处理后仍有2.5M。打包生产版本分析,也是同样的问题。
  • 项目通过vue-cli命令行创建,因此以下涉及示例的,都以此为准,使用HBuilderX开发的,麻烦自行转换操作。

解决方法

  • 开启运行时压缩

这个方法测试了,没看出有什么帮助。

  • 分包优化

这个方法更多地是对于页面过多或static图片资源过多的情况有用。此项目也进行了分包,但这个并未解决打包后vendor过大的问题。

以上2个方法,为uni官方建议的处理vendor过大的方法,见文档-介绍-uni-app 跨端开发注意事项-vendor过大的处理方式

  • Bug:分包资源被打包到主包而导致的vendor过大

这个问题没有遇到,看起来是曾经版本出现过,但新版本已修复,若是这个问题导致的,则可参考:issue #649question #72577

  • 其他的一些处理方式

看到的一篇文章,虽然我的项目中不是这些原因,但这些方法是需要考虑的:小程序包大小优化(uni-app)

  • 开启生产环境gzip,vendor.js从2.5M减少到440k

如何开启,使用compression-webpack-plugin

vue.config.js:

const CompressionWebpackPlugin = require('compression-webpack-plugin')  
const productionGzipExtensions = ['js', 'css']  

configureWebpack: {  
    plugins: [  
          new CompressionWebpackPlugin({  
            filename: '[path].gz[query]',  
            algorithm: 'gzip',  
            test: new RegExp('\\.('   productionGzipExtensions.join('|')   ')$'),//匹配文件名  
            threshold: 10240,//对10K以上的数据进行压缩  
            minRatio: 0.8,  
            deleteOriginalAssets:false,//是否删除源文件  
          })  
        ]}  
}

文件分析

使用 webpackBundleAnalyzer,可以帮助分析文件大小。

vue.config.js:

pluginOptions: {  
    webpackBundleAnalyzer: {  
      openAnalyzer: process.env.NODE_ENV === 'production'  
    }  
  },

编译后,会同时带一份报告,可查看 stat, parsed, gzip 三种状态的文件大小。

10 关注 分享
9***@qq.com 1***@qq.com Unlimited_S aoaobaba Alexander360 linnian Megasu jooker 鸡排饭加个蛋 HRK_01

要回复文章请先登录注册

HobaiRiku

HobaiRiku

本来项目是使用hbuilderx编译的,后来做了一套cli的环境,代码一摸一样(只是cli套入了src文件夹),但是hbuilder编译出来的都比cli的小,cli使用了`--minimize` 和`UNI_MINIMIZE=true`, 已经非常接近hbuilder的生成代码,仔细进去看,就像楼下说的,很多文件都有regeneratorRuntime的重新定义,导致js不断积累变大,不知道cli方面还有哪里可以配置。
2022-09-09 18:35
hdll

hdll

我们使用cli方式创建小程序,即使使用了分包优化,vendor.js依然非常大,未压缩模式下接近2M.

经过查看vendor.js的内容,发现了一个非常严重的问题:
几乎所有的工具类文件都重新定义了一遍_regeneratorRuntime,而且_regeneratorRuntime的内容是完全一致的。既然是打包到一个vendor下面了,为什么不能直接在头部定义一个公用的_regeneratorRuntime?
类似的还有“function asyncGeneratorStep”,“function _asyncToGenerator”等等。
这样重复定义底层helper函数是出于什么考量呢?
2022-08-23 10:51
1***@qq.com

1***@qq.com

请问解决了吗?我运行到字节跳动也是这个问题2M多,运行到微信就400k,而且"optimization": {"subpackages": true},只对微信生效,看了文档字节是没这个配置的
2022-08-10 11:12
ted4kra

ted4kra

我这的问题是,分包以后vendor.js里面一堆的moment里locale的代码,在Vue.config.js里把moment的locale删了,从723k减到了481k。能少一点是一点

```
var webpack = require('webpack')

module.exports = {
...
chainWebpack: config => {
config.plugin('ignore')
.use(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)); //忽略/moment/locale下的所有文件
}
...
};

```
2022-07-08 15:43
忘记我是谁

忘记我是谁

manifest.json 源码 改成这个 这样分包的资源就不会跑到主包里面去了 我用了之后主包80kb 分包1.0M 不用之前刚好反过来,因为分包里面有个大js数据
/* 小程序特有相关 */
"mp-weixin" : {
"appid" : "****",
"setting" : {
"urlCheck" : false,
"es6" : false
},
"usingComponents" : true,
"uniStatistics" : {
"enable" : false
},
"optimization" : {
"subPackages" : true
}
},
2022-03-10 21:22
1***@qq.com

1***@qq.com

回复 5***@qq.com :
你是怎么解决这个问题的??
2021-12-23 10:11
1***@qq.com

1***@qq.com

压缩没用呀,太烦了
2021-12-23 10:10
5***@qq.com

5***@qq.com

gzip压缩了个寂寞。小程序根本不鸟你的压缩后的文件
2021-09-08 16:00
9***@qq.com

9***@qq.com

回复 弃续 :
你解决了吗
2021-08-19 13:46
前端码农boy

前端码农boy

回复 前端码农boy :
解决了!

解决方案:直接在manifest.json,点击源码视图:查找:mp-weixin:添加:"optimization":{ "subPackages":true }
2021-07-07 16:55