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

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

要回复文章请先登录注册

DCloud_UNI_FXY

DCloud_UNI_FXY

compression-webpack-plugin只是辅助服务器做gzip压缩的。重要的是服务器开启gzip支持,服务器开启动态gzip,不需要compression-webpack-plugin也一样可以
2020-03-18 12:28
GraceLeeau

GraceLeeau (作者)

回复 w***@outlook.com :
使用HBuilderX编辑器编译走的是编辑器的配置,具体我没有用过,这个你咨询一下官方人员,或找HBuilderX编译打包项目的相关文章看看。你这个报错第一句说的文件`vue.config.js`是走vue-cli编译的配置文件,详细配置说明可见[vue-cli文档](https://cli.vuejs.org/zh/config/#vue-config-js).
2020-03-18 11:57
w***@outlook.com

w***@outlook.com

报错如下:
16:07:39.718 ERROR Error loading vue.config.js:
16:07:39.726 ERROR Error: Cannot find module 'webpack/lib/ModuleFilenameHelpers'
16:07:39.729 Error: Cannot find module 'webpack/lib/ModuleFilenameHelpers'
16:07:39.739 at Function.Module._resolveFilename (module.js:547:15)
16:07:39.739 at Function.Module._resolveFilename (/Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli/node_modules/module-alias/index.js:49:29)
16:07:39.755 at Function.Module._load (module.js:474:25)
16:07:39.771 at Module.require (module.js:596:17)
16:07:39.771 at require (internal/module.js:11:18)
16:07:39.788 at Object.<anonymous> (/Users/qm/Documents/Projects/AppFramework/SourceCode/trunk/uniapp/node_modules/compression-webpack-plugin/dist/index.js:20:53)
16:07:39.789 at Module._compile (module.js:652:30)
16:07:39.805 at Object.Module._extensions..js (module.js:663:10)
16:07:39.805 at Module.load (module.js:565:32)
16:07:39.822 at tryModuleLoad (module.js:505:12)
2020-03-16 16:19
w***@outlook.com

w***@outlook.com

你好!项目不是用vue-cli创建的,请问HbuilderX创建的项目怎么使用“compression-webpack-plugin”,用npm执行安装后,打包还是报错。
2020-03-16 16:18