//vue.config.js
const path = require('path')
// const CopyWebpackPlugin = require('copy-webpack-plugin')
// gzip压缩
const CompressionWebpackPlugin = require('compression-webpack-plugin') // 开启压缩 @4.0.1
module.exports = {
configureWebpack: config => {
if (isProduction) {
config.resolve.alias['bn.js'] = path.resolve(process.cwd(), 'node_modules', 'bn.js')
// gzip压缩
config.plugins.push(
new CompressionWebpackPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: /\.js$|\.html$|.\css/,
threshold: 10240, // 只有大小大于该值的资源会被处理 10240
minRatio: 0.8, // 只有压缩率小于这个值的资源才会被处理
//deleteOriginalAssets: false // 删除原文件
deleteOriginalAssets: true // 删除原文件
})
)
}
- 发布:2024-07-04 16:43
- 更新:2024-07-04 16:43
- 阅读:126
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Windows
PC开发环境操作系统版本号: win10
HBuilderX类型: 正式
HBuilderX版本号: 4.15
第三方开发者工具版本号: RC 1.06.2404301
基础库版本号: 3.4.9
项目创建方式: HBuilderX
示例代码:
操作步骤:
(1)增加vue.config.js文件
(2)安装compression-webpack-plugin插件
(3)发行微信小程序
(4)上传微信小程序
(1)增加vue.config.js文件
(2)安装compression-webpack-plugin插件
(3)发行微信小程序
(4)上传微信小程序
预期结果:
小程序主包大文件压缩为gz文件,主包尺寸减小,顺利上传到微信后台。
小程序主包大文件压缩为gz文件,主包尺寸减小,顺利上传到微信后台。
实际结果:
所有gz文件被微信小程序开发者工具拒绝上传,执行报错缺失js等文件
所有gz文件被微信小程序开发者工具拒绝上传,执行报错缺失js等文件
bug描述:
用uni-app HbuildX开发微信小程序,增加uni-push2.0之后,主包一下子变成了2.2M,传不上服务器。分析了原因,是因为要在app.vue中启动监听,这样主包一下子增加了近200K,vendor.js文件由500k跃变到了700k,做构成分析主要是因为vendor.js里面新增了uni-push.es.js文件内容。
然后在查了很多优化主包的资料,终于配置好了vue.config.js,使用compression-webpack-plugin插件对代码进行压缩。期间因为版本不匹配等问题也熬了几个晚上,好在总算看到了生成的gz文件。原先700多K的vendor.js被压缩成了206K!
心中激荡万分,开始用微信小程序开发者工具上传,结果所有压缩成.gz的文件都提示没有上传,在开发者工具运行时也报错,提示对应的.js文件没有定义。
请问大佬,是微信小程序不支持gz压缩吗?还是有啥地方没配置好?