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

解决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

要回复文章请先登录注册

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
1***@qq.com

1***@qq.com

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

8***@qq.com

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

asyncGuo

vendor.js文件只有QQ小程序的开发环境下才会体积很大,是因为打包时,开启了inline-source-map,把sourcemap都加到了vendor文件后面
2020-07-16 18:58
6***@qq.com

6***@qq.com

我怎么看不到别人的评论
2020-07-13 10:02
jtshushu

jtshushu

你好我怎么报错
E:\app开发\shumatt08\vue.config.js:25
17:44:21.622 test: new RegExp('\\.(' productionGzipExtensions.join('|') ')$'),//匹配文件名
17:44:21.629 ^^^^^^
2020-07-02 17:48
1***@qq.com

1***@qq.com

不能用
2020-06-03 14:01
itmonkey

itmonkey

没有用啊
2020-05-18 19:08