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

背景与现象

• 将一个当前只有简单功能的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 #649，question #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 三种状态的文件大小。