GraceLeeau
GraceLeeau
  • 发布:2020-03-16 15:54
  • 更新:3 天前
  • 阅读:9044

解决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 三种状态的文件大小。

4 关注 分享
913360226@qq.com 1029976749@qq.com Unlimited_S aoaobaba

要回复文章请先登录注册

cm1090137187@163.com

cm1090137187@163.com

回复 LikeU恋爱交友 :
难搞,正式版也发行不了
3 天前
LikeU恋爱交友

LikeU恋爱交友

回复 cm1090137187@163.com :
没啊,我也是 2.4下不去了
3 天前
cm1090137187@163.com

cm1090137187@163.com

回复 wenjiamian@outlook.com :
同用Hbuilderx创建项目,npm安装“compression-webpack-plugin”后,感觉不起作用,请问解决了么
4 天前
cm1090137187@163.com

cm1090137187@163.com

回复 asyncGuo :
qq2.4,微信能正常编译,请问怎么解决?
4 天前
cm1090137187@163.com

cm1090137187@163.com

回复 LikeU恋爱交友 :
老铁解决没,我的也是微信没问题,qq体积2.4m
4 天前
LikeU恋爱交友

LikeU恋爱交友

压缩 都打开了,最后 还是 2.5M,大于 QQ要求的 2M , 咋整
2021-04-29 19:28
typer

typer

回复 DCloud_UNI_FXY :
前端在打包时就生成号gzip文件,应该是能帮服务端节省动态gzip的性能消耗的。虽然不清楚能节省多少
2021-01-14 21:43
紫洋

紫洋

回复 DCloud_UNI_FXY :
现在你们开启了自身的unicloud web,没有本地gzip进行压缩,那你们服务器的压力不就会很大吗?如果本地就压缩好了,不经过服务器那,服务器会减轻很大压力,你说呢?
2020-09-29 18:27
1912705446@qq.com

1912705446@qq.com

您好,我是打包完vendor.js很大,有什么解决办法吗
2020-08-11 14:02
864686825@qq.com

864686825@qq.com

回复 jtshushu :
你好 请问问题解决了吗 我遇到一样的问题
2020-08-08 17:16