微信小程序源码压缩探索

最新推荐文章于 2024-04-23 16:26:26 发布
最新推荐文章于 2024-04-23 16:26:26 发布
阅读量2.4k 收藏 3
点赞数 1
分类专栏： 小程序 文章标签： 小程序 压缩
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28506819/article/details/119350441
版权

微信小程序主包具有2M的最大限制，因此压缩程序源码成为一个优化的可能。下面是一些探索的结论以及为解决问题而做的一些方案。

1. 一个结论

先说一个结论：压缩JS文件和WXSS文件对于缩小主包体积是没有作用的，js和wxss文件的确是源码中最大的两个部分，但是小程序开发工具在打包上传的时候可以设置自动压缩这两部分，因此我们不必做多余的动作（实验发现做了也是无用的）。
在这里插入图片描述

2. 压缩WXML

WXML的压缩和单纯的HTML压缩有两个主要的不同点：

  1. WXML里面可能存在WXS脚本，而WXS的处理不同于WXML的处理。
  2. WXML的属性是区分大小写的，因此采用常见的gulp插件（如gulp-htmlmin）压缩WXML可能改变这种这种属性，同时它也不能处理wxs。

对于第一种情况，首先的一点建议是总是将wxs脚本单独放在一个文件中，而不是内联在WXML中，这样做的好处是可以将wxs作为一个标签来处理，而wxs文件也可以做单独处理。

由于我们不可以避免的会引入别人的npm包，而别人可能不采用这种规范（如iview），所以在处理wxml压缩的时候仍然不可避免的要考虑这种情况。

对于第二种情况，既然压缩html的gulp插件可能对wxml有副作用，那么可以考虑以下两个解决方案：

  1. 自己开发一个gulp插件。
  2. 自己开发一个内联插件（内联插件介绍）。

下面是我开发的一个压缩WXML的内联插件示例（全部的代码将会在后面展示）：

function minifyWXML() {
  return through2.obj(function (file, _, cb) {
    if (file.isBuffer()) {
      let code = file.contents.toString();
      const result = code.match(/<wxs(.*?)>[\s\S]*(<\/wxs>)/g); // 提取wxs内容
      code = code.replace(/<wxs(.*?)>[\s\S]*(<\/wxs>)/g, '')
        .replace(/\n+|\t+/g, ' ') // 删除换行和缩进
        .replace(/\s+/g, ' ') // 删除多个空格
        .replace(/(>\s)/g, '>') // 删除标签前面和后面的空格
        .replace(/(\s<)/g, '<')
        .replace(/<!--[\w\W\r\n]*?-->/g, '') // 删除注释
      if (result) {
        code = result.join('') + '\n' + code; // 将wxs拼接到wxml的前面
      }
      // eslint-disable-next-line no-param-reassign
      file.contents = Buffer.from(code);
    }
    cb(null, file);
  });
}

对于wxml中wsx，这里只是将它提取了出来，然后放到文件的头部，有两个原因：

  1. 压缩这一个部分可能导致未知的问题，例如函数名被替换，不同人的编码习惯导致压缩后代码出错等。
  2. wxs中的内容在整个应用中占比是比较小的。

删除换行和缩进的时候一定要留一个空格，因为我们的组件通常是以下方式书写的
在这里插入图片描述
若不换行可能导致出现<viewwx:for....>这种无法识别的标签。

最后得到的结果是这样的（压缩iview的代码），对于一个比较大的项目来说，这种压缩大致可以减少100kb左右。
在这里插入图片描述

3. 压缩json

压缩json比较简单，直接使用gulp-jsonminify即可，这种压缩也可以减少几十kb。

4. 压缩图片

这里不做图片压缩，理由如下：

  1. 图片应尽量放在cdn里而不是本地。
  2. 对于少量的图片可以事先设计好，或者使用字体图标。

5. wxss的压缩

css压缩没什么用，这里还是简单介绍一下吧，由于wxss里面的@import和css的import语法不同，因此不能使用通常的css gulp插件压缩，下面是一个我实现的内联插件：

function minifyWXSS() {
  return through2.obj(function (file, _, cb) {
    if (file.isBuffer()) {
      let code = file.contents.toString();
      code = code.replace(/\/\*[\s\S]*\*\//g, '');
      const result = code.match(/@import\s+["'].*["'];?/g);
      code = code.replace(/@import\s+["'].*["'];?/g, '');
      code = cleanCSS.minify(code).styles;
      if (result) {
        code = result.join('\n') + '\n' + code;
      }
      // eslint-disable-next-line no-param-reassign
      file.contents = Buffer.from(code);
    }
    cb(null, file);
  });
}

6. 总结

总的来说就是， 压缩小程序代码就是将所有代码处理后放在一个新的目录下，相当于新建了一个应用，然后改变project.config.json下的miniprogramRoot为新目录即可。建议miniprogram_npm下的文件也一起压缩。这种压缩可以获得100-200多kb的空间。
在这里插入图片描述

下面是完整的代码gulpfile文件代码（gulp版本>=4.0.0）：

/**
 * 微信小程序优化压缩工具
 */
const gulp = require('gulp');
const colors = require('colors');
const pump = require('pump');
const jsonminify = require('gulp-jsonminify');
const del = require('del');
const size = require('gulp-size');
const terser = require('gulp-terser');
const through2 = require('through2');
const CleanCSS = require('clean-css');

const JsSizeBefore = size({ title: 'js压缩前：' });
const JsSizeAfter = size({ title: 'js压缩后：' });
const WXMLSizeBefore = size({ title: 'WXML压缩前：' });
const WXMLSizeAfter = size({ title: 'WXML压缩后：' });
const WXSSSizeBefore = size({ title: 'WXSS压缩前：' });
const WXSSSizeAfter = size({ title: 'WXSS压缩后：' });
const JSONSizeBefore = size({ title: 'JSON压缩前：' });
const JSONSizeAfter = size({ title: 'JSON压缩后：' });
const OtherSize = size({ title: '其它文件：' });

function getSize(SizeObj) {
  return SizeObj.size || 0;
}

function getTotalSize() {
  const before = getSize(JsSizeBefore.size) + getSize(WXMLSizeBefore.size)
    + getSize(WXSSSizeBefore.size) + getSize(JSONSizeBefore.size) + getSize(OtherSize.size);
  const after = getSize(JsSizeAfter.size) + getSize(WXMLSizeAfter.size)
    + getSize(WXSSSizeAfter.size) + getSize(JSONSizeAfter.size) + getSize(OtherSize.size);

  return {
    beforeSize: `${(before / 1024).toFixed(3)}KB`,
    afterSize: `${(after / 1024).toFixed(3)}KB`,
  };
}

const cleanCSS = new CleanCSS({
  units: {
    rpx: true,
  },
});

function minifyWXML() {
  return through2.obj(function (file, _, cb) {
    if (file.isBuffer()) {
      let code = file.contents.toString();
      const result = code.match(/<wxs(.*?)>[\s\S]*(<\/wxs>)/g);
      code = code.replace(/<wxs(.*?)>[\s\S]*(<\/wxs>)/g, '')
        .replace(/\n+|\t+/g, ' ')
        .replace(/\s+/g, ' ')
        .replace(/(>\s)/g, '>')
        .replace(/(\s<)/g, '<')
        .replace(/<!--[\w\W\r\n]*?-->/g, '');
      if (result) {
        code = result.join('') + '\n' + code;
      }
      // eslint-disable-next-line no-param-reassign
      file.contents = Buffer.from(code);
    }
    cb(null, file);
  });
}

function minifyWXSS() {
  return through2.obj(function (file, _, cb) {
    if (file.isBuffer()) {
      let code = file.contents.toString();
      code = code.replace(/\/\*[\s\S]*\*\//g, '');
      const result = code.match(/@import\s+["'].*["'];?/g);
      code = code.replace(/@import\s+["'].*["'];?/g, '');
      code = cleanCSS.minify(code).styles;
      if (result) {
        code = result.join('\n') + '\n' + code;
      }
      // eslint-disable-next-line no-param-reassign
      file.contents = Buffer.from(code);
    }
    cb(null, file);
  });
}

// 配置项
const conf = {
  // 开发目录
  devPath: 'src',
  // 编译目录
  prodPath: 'dist',
  filesPath: {
    // js文件
    js: '/**/*.js',
    // wxss文件
    wxss: '/**/**.wxss',
    // wxml文件
    wxml: '/**/**.wxml',
    wxs: '/**/**.wxs',
    // json文件
    json: '/**/**.json',
    // 其它(jpg|jpeg|png|gif)
    other: '/**/{**.jpg,**.jpeg,**.png,**.gif,**.webp,**.eot,**.ttf,**.woff,**.woff2,**.svg}',
  },
  ignore: ['/node_modules/**'],
};
conf.ignore = conf.ignore.map(path => `!${conf.devPath}${path}`);

// 显示时间
const getTime = function () {
  return '[' + colors.white(new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()) + '] ';
};

// 输出log
const _log = function (msg) {
  console.log(getTime() + msg);
};

/**
 * 优化js文件
 * @param filePath
 */
const _optJS = function (filePath) {
  _log(colors.white('对 js 文件进行优化...'));
  return pump([gulp.src(filePath, {
    base: conf.devPath,
  }),
  JsSizeBefore,
  terser({
    keep_classnames: true,
    keep_fnames: true,
  }).on('error', function (err) {
    _log('【错误】 '.red + '文件: ' + err.fileName + ', ' + err.cause);
  }),
  JsSizeAfter,
  gulp.dest(conf.prodPath)]);
};

/**
 * 优化wxss文件
 * @param filePath
 */
const _optWXSS = function (filePath) {
  _log(colors.white('对 wxss 文件进行优化...'));
  return gulp.src(filePath, {
    base: conf.devPath,
  })
    .pipe(WXSSSizeBefore)
    .pipe(minifyWXSS())
    .pipe(WXSSSizeAfter)
    .pipe(gulp.dest(conf.prodPath));
};

/**
 * 优化json文件
 * @param filePath
 * @param cb
 * @private
 */
const _optJSON = function (filePath) {
  _log(colors.white('对 json 文件进行优化...'));
  return gulp.src(filePath, {
    base: conf.devPath,
  })
    .pipe(JSONSizeBefore)
    .pipe(jsonminify())
    .pipe(JSONSizeAfter)
    .pipe(gulp.dest(conf.prodPath));
  // cb();
};

/**
 * 优化wxml文件
 * @param filePath
 * @private
 */
const _optWXML = function (filePath) {
  _log(colors.white('对 wxml 文件进行优化...'));
  return gulp.src(filePath, {
    base: conf.devPath,
  }).pipe(WXMLSizeBefore)
    .pipe(minifyWXML())
    .pipe(WXMLSizeAfter)
    .pipe(gulp.dest(conf.prodPath));
};

/**
 * 复制文件
 * @param filePath
 */
const _copyFiles = function (filePath) {
  return gulp.src(filePath, {
    base: conf.devPath,
  }).pipe(OtherSize).pipe(gulp.dest(conf.prodPath));
};

// 清理编译目录
gulp.task('clean', function () {
  _log(colors.white('开始清理 ' + conf.prodPath + ' 目录...'));
  return del([conf.prodPath] + '/**/*').then(function (paths) {
    _log(colors.white('清理完毕, 共清理 ' + colors.red(paths.length) + ' 个文件和目录。'));
  });
});

// 优化js
gulp.task('js', function () {
  const files = [
    conf.devPath + conf.filesPath.js,
    ...conf.ignore,
  ];
  return _optJS(files);
});

// 优化wxss
gulp.task('wxss', function () {
  const files = [
    conf.devPath + conf.filesPath.wxss,
    ...conf.ignore,
  ];
  return _optWXSS(files);
});

// 优化wxml
gulp.task('wxml', function () {
  const files = [
    conf.devPath + conf.filesPath.wxml,
    ...conf.ignore,
  ];
  return _optWXML(files);
});

// 优化json
gulp.task('json', function () {
  const files = [
    conf.devPath + conf.filesPath.json,
    ...conf.ignore,
  ];
  return _optJSON(files);
});

// 优化其它
gulp.task('other', function () {
  const files = [
    conf.devPath + conf.filesPath.other,
    conf.devPath + conf.filesPath.wxs,
    conf.devPath + conf.filesPath.wxss,
    conf.devPath + conf.filesPath.js,
    ...conf.ignore];
  // eslint-disable-next-line no-useless-concat
  _log(colors.white('对 ' + 'jpg/jpeg/png/gif/svg' + ' 文件进行优化...'));
  return _copyFiles(files);
});

// 计时
let startTime;
let endTime;
// 开始任务
gulp.task('startProd', function (cb) {
  startTime = new Date().getTime();
  _log(colors.green('开始优化, 请稍候...'));
  cb();
});

gulp.task('endProd', function (cb) {
  _log(colors.green('优化完毕, 请查看 ' + conf.prodPath + ' 目录。'));
  const totalSize = getTotalSize();
  _log(colors.green(`压缩前总尺寸${totalSize.beforeSize}，压缩后总尺寸：${totalSize.afterSize}`));
  endTime = new Date().getTime();
  _log(colors.green('耗时： ' + (endTime - startTime) + 'ms'));
  cb();
});

// 编译任务
// gulp.task('default', gulp.series('startProd', 'clean', gulp.parallel('other', 'json', 'wxml', 'wxss', 'js'), 'endProd'));
gulp.task('default', gulp.series('startProd', 'clean', gulp.parallel('other', 'json', 'wxml'), 'endProd'));

参考资料：wxmini-optimize

zc的救赎
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
辅助工具：微信小程序代码压缩器
03-15
当你的微信小程序编译包大小超过 1024kb 时，不要急着砍模块，我觉得它还能再挽救一下。   做了些什么 压缩 js/json/wxml/wxss 文件； 优化 jpg/gif/png/svg 文件； 没了。 目录说明 ./src 为开发目录 ./dist 为编译目录 开始使用 安装依赖： cd /yourPathnpm i 复制代码 开发模式： npm run dev 复制代码 上线或测试模式： npm run build <span style="float: left; margin-right: 5px;"
微信小程序源码-合集1.rar
09-04
【微信小程序-源码合集】该合集主要整理 包含交友互动、节日祝福、金融行业、旅游行业、论坛系列、美容行业！
对JS文件进行压缩未通过，对WXML文件进行压缩未通过 问题解决
古猿写代码
03-20 243
在使用uniapp 开发微信小程序，进行上架发布时 代码质量栏 出现对JS文件进行压缩未通过，对WXML文件进行压缩未通过 问题。虽然现实代码上传成功，但是作为一个合格的猿人，肯定是要解决的。在微信开发工具端，找到详情按钮，勾上2和3（如下图所示）。在微信开发工具中，重新编译，重新扫描即可解决。
小程序代码体积优化
weixin_34387284的博客
08-28 1544
微信小程序在发布的时候，对提交的代码有 2 MB 大小的限制。开发之前就需要提前有个心理准备。由于我也是第一次做小程序开发代码大小就超过了2MB,开发者工具都无法预览了，这就很尴尬了。我自己的优化代码积的方式也不多，如果你有更好的方法，可以给我一些指导，感激不尽哦。 1.不要引用本地图片或者图标，最好是从服务...
微信小程序图片前端压缩（canvas）
qq_40236628的博客
09-15 2500
微信小程序图片前端压缩（canvas）
微信小程序做图片压缩
github_38928905的博客
10-22 7552
功能期望：图片需要压缩至100KB以下 注意： 1 下方用大小判断是80kb，为了防止图片输出是其大小变化有误差； 2 canvas 的大小一定要动态设置，不能写死 3 为了防止用于压缩的canvas影响页面，将其绝对定位到其他地方 <!-- 页面中写，用于图片压缩 --> <canvas canvas-id="myCanvas" style="position:fixed;right:-{{canvasW/1+300}}px;bottom:{{canvasH/1+1000}}px;
小程序包体积压缩优化，下降500k起步
weixin_46095200的博客
03-08 5143
小程序极限压缩
uniapp 开发小程序 减少打包体积
qq_27909209的博客
05-16 2818
如果uniapp内部写的代码发布平台有不同小程序、h5、app。那么不同平台的包需要打包在自己的平台，例如微信小程序的包不应该有h5页面链接，则可以在pages.json中写入。点击 HBuilder X 上方的 运行-> 运行到小程序模拟器 ->运行是是否压缩代码 勾选。以下以微信小程序举例 限制了每个包的大小为2m，1m=1024kb，导致无法真机调试和发布。1：在使用HBuilder X进行开发微信小程序时 可进行设置 压缩微信小程序代码体积。如果页面内部则需设置页面ifdef部分内容配置。
压缩微信小程序wxss样式文件的脚本或压缩css
xxx
03-02 584
需要下载uglifycss插件 npm i uglifycss -D，运行node compressWxss.js压缩完后删除插件，删除compressWxss.js，完成✅。 // compressWxss.js const { readdirSync, statSync, writeFileSync, readFileSync } = require("fs"); const { join } = require("path"); const uglifycss = require("uglifyc.
HbuilderX 中运行 uniapp 项目通过微信开发者工具查看主包分包占用大小,依赖分析
YZRHANYU的博客
11-01 2803
HbuilderX 中运行 uniapp 项目通过微信开发者工具查看主包分包占用大小,依赖分析
微信小程序前段压缩代码
Programmer_FuQiang的博客
12-02 967
最近需求就是通过微信小程序上传图片给后端，废话不多说直接上代码： xml代码如下： <canvascanvas-id='photo_canvas'style='position:fixed;left:9999px;width:500px;height:{{canvasHeight}}px'class='myCanvas'></canvas> js代码如下： data中会定义如下几个字段 主要是picturePathLocal 和...
160套小程序源码微信小程序源码合集
06-01
AppleMusic (知乎日报) 微信小程序 d artand 今日更新求职招聘类 医药网 口碑外卖点餐 城市天气 外卖小程序 定位天气 家居在线 微信小程序-大好商城，wechat-weapp 微信小程序的掘金信息流 微信跳一跳小游戏源码 微票源码-demo 急救应急处理 打卡签到 万年历 用户反馈组件 电商-拼团 倒计时 电商小程序 电影推荐 电影日历 画布：时钟 番茄时钟 百度小说 相册；处理用户信息 省市选择控件 科学计算器 移动小商城：基于node，包含前后台 移动端商城 简易计算器 网易云课堂 芒果TV 语音跟读 豆瓣图书 豆瓣电影 货币汇率 购物车 购物车001 跑步 地理位置 计时器 身份证查询 车源宝 轮播图+菜单 轮播图变换 辩论倒计时 运动 重邮 面包旅行：界面设计，文本展示 题库：选择选项，切换至下一题 首字母排序选择 高仿苹果计算器 鲜花订购，animation动画卡片效果 麻将骰子：附详细教程 详见 https://blog.csdn.net/weixin_43860634/article/details/130990815
微信小程序-电商小程序-程序源码.zip
05-31
微信小程序相关源码
微信小程序云工具箱源码
04-23
工具箱源码，趣味工具微信小程序源码。皮皮趣味小工具小程序源码，支持功能去水印，精选壁纸，图片压缩，文字生成二维码，图片加水印，模拟来电，手持弹幕，掷骰子…等使用小工具，一个小程序有几十个功能。
小程序源码：强大的多功能图片处理器微信小程序源码下载图片画框合成-多玩法安装简单
06-08
大家好这是以开以图片为主题的一款小程序 里面拥有了多种的图片处理功能,也算是比较强大的一款 另外小编最喜欢的就是里面的图片画框合成这个功能 该功能里面有N种画框模板,然后画框的尺寸根据您的图片自适应处理...
小伊工具箱小程序源码/趣味工具微信小程序源码
03-03
小伊工具箱小程序源码，趣味工具微信小程序源码。皮皮趣味小工具小程序源码，支持功能去水印，精选壁纸，图片压缩，文字生成二维码，图片加水印，模拟来电，手持弹幕，掷骰子…等使用小工具，一个小程序有几十个功能...
淘宝客优惠券领取微信小程序源码(前台和后台).zip
04-30
淘宝客优惠券领取微信小程序源码(前台和后台) 源码描述： 一、源码特点 1、这是一个微信小程序对接淘宝的淘宝客api自助搜索优惠券领取程序，简单易学，有兴趣的欢迎下载 2、后台采用asp.netMvc框架开发、实现了...
皮皮趣味小工具微信小程序源码
03-14
工具箱源码，趣味工具微信小程序源码。皮皮趣味小工具小程序源码，支持功能去水印，精选壁纸，图片压缩，文字生成二维码，图片加水印，模拟来电，手持弹幕，掷骰子…等使用小工具，一个小程序有几十个功能。之前分享...
微信小程序webview和小程序通讯
最新发布
q759859479的博客
04-23 1145
1.1需要再小程序嵌入vr页面，同时在vr页面添加操作按钮与小程序进行通信交互1.3 开发工具：uniapp开发小程序1.3原型图点击体验官带看跳转小程序的体验官带看页面点击立即咨询唤起小程序弹窗打电话web-view | uni-app官网 (dcloud.net.cn)
微信小程序 源码 rar
12-04
微信小程序源码rar文件是一种压缩包格式，用于存储微信小程序的源代码文件。当我们在开发微信小程序时，通常会使用开发工具编写代码，编写完成后将代码保存在一个文件夹中，然后可以使用压缩软件将文件夹压缩为rar格式的压缩包，这样就可以方便地分享给其他开发人员或保留备份。 在这个rar文件中，包含了微信小程序的所有源代码文件，包括前端页面文件、后端逻辑文件、配置文件等。开发人员可以通过解压rar文件，将源代码导入到微信小程序开发工具中进行调试和修改。同时，通过分享rar文件，也可以方便团队成员之间进行代码共享和协作开发。 对于开发人员来说，保留微信小程序源码rar文件也是非常重要的，因为它可以作为项目的备份文件，即使在意外情况下，也可以通过rar文件进行恢复，确保代码的安全性和稳定性。 总之，微信小程序源码rar文件是微信小程序开发中不可或缺的一部分，它方便了代码的分享和备份，也保证了项目的持续性和安全性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值