小程序 |
您所在的位置:网站首页 › 代码压缩文件 › 小程序 |
起因
随着业务的发展,项目不断地迭代,功能模块越加越多,项目代码和静态资源文件体积已经超过了微信小程序限定的 2M 范围。虽说小程序支持分包操作,然而用户进入分包模块时会有一个比较长的加载时间,整体体验还是不友好的,万不得已不要分包。既然不分包,那么我们可以从哪方面来进行项目体积的“瘦身”呢? 文件层通过分析小程序的项目目录我们可知,小程序的文件主要有 .js .wxs .wxss .wxml .json 后缀的文件和一些图片资源文件,如果对这些文件进行压缩,项目的体积至少能缩减 10%。微信开发者工具有提供代码压缩的配置,只要上传代码前勾选对应配置即可。这对于一般小程序项目来说是挺方便的,然而对于使用了第三方框架(如:wepy、taro)的项目,这些功能基本框架代码编译层面就进行来处理,无需在开发者工具中勾选。 既然这么完备了,我们还有必要自行编写代码来对这些文件进行压缩么?其实,实际上上面提到的都会有些不足的地方,如官方提供的压缩做不到图片的压缩,第三方方框架不会对部分文件进行压缩。所以根据我们的需求,自行写一套自动化压缩流程才是最稳妥的。 自动化压缩要实现自动化压缩流程,可使用 gulp、grunt、webpack 等构建工具来进行构建。由于自己比较熟悉 gulp 故使用它来进行构建流程的编写。gulp 的使用比较简单,只要在项目根目录新建一个 gulpfile.js 文件,安装相关依赖后就能运行。 // 安装 npm install gulp-cli -g npm install --save-dev gulp // 执行(默认执行根目录 gulpfile.js 文件) gulp因为 gulpfile.js 文件还没写内容,所以打印只能看到 ‘default’ 任务的执行记录。下面我们使用 gulp 4.x 的版本进行开发,旧版本写法可能会有些出入,不过大致原理是一样的。 // gulpfile.js 'use strict' const { task, dest, src, series } = require('gulp') task('js', function(){ // 压缩 .js }) task('wxml', function(){ // 压缩 .wxml }) // 省略... task( 'default', series([ 'js', 'wxml', //... ]) ) .js 压缩原本是使用 gulp-uglify 这个库进行压缩的,后发现其不支持 es6语法,所以转用 gulp-uglify-es,两者配置有些出入。小程序的 js 文件因其语法和标准的 JavaScript 语法是一样的,故无需额外配置,直接默认配置压缩即可。 const uglify = require('gulp-uglify-es').default task('js', function () { return src('dist/**/*.js') .pipe(uglify()) .pipe(dest('dist/')) })第三方框架 wepy 或者 taro 都会对 .js 文件进行压缩,正常情况下我们无需二次压缩。 .wxs 压缩WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML,可以构建出页面的结构。 WXS 与 JavaScript 是不同的语言,有自己的语法,并不和 JavaScript 一致。 正常情况下 .wxs 文件可以和 .js 一样可通过 gulp-uglify-es 来进行压缩,不过由于微信坑爹地搞特殊化,wxs 就像严重阉割版的 js,在压缩后会出现各种问题。 task('wxs', function () { return src(['dist/**/*.wxs', '!dist/components/vant/wxs/add-unit.wxs']) .pipe(uglify({ compress: { ie8: true, // 支持 ie8,为了禁止 a === undefined 自动转换为 void 0 === a join_vars: false // 禁止合并 var } })) .pipe(dest('dist/')) })代码中 "!dist/components/vant/wxs/add-unit.wxs" 是排除掉了此文件,原因是暂无方法解决压缩后部分正则无法正常使用的问题。 // 压缩前 var REGEXP = getRegExp('^\d+(\.\d+)?$'); // 压缩后 var REGEXP = getRegExp('^d+(.d+)?$');微信的 getRegExp 并不像 new RegExp 那样支持双反斜杆进行字符转义,巨坑!!!老实说,如果官方不出专门的压缩库,感觉最好还是不要压缩这个东西。 .wxss 压缩样式和常规的的 css 文件的差不多,因此可以通过一般的样式工具进行压缩,比如 gulp-clean-css 第三方库。 const cleanCss = require('gulp-clean-css') const replaceimport = require('./replaceImport') task('wxss', function () { return src('dist/**/*.wxss') .pipe(cleanCss({ compatibility: '*', inline: false })) .pipe(replaceimport()) .pipe(dest('dist/')) })由于压缩老版本 wepy 项目样式时,组件引入样式 @import "xxx" 会被转成 @import url('xxx') 在开发者工具中会报错,故写了 replaceimport 转回来,taro 项目无需加。 // replaceimport.js 'use strict'; /** * 由于使用 gulp-clean-css 进行样式压缩时 * 会将 `@import "xxx";` 转成 `@import url(xxx);` * 而转化后的 import 在小程序开发者工具会报错 * 所以用此方法,将 @import url(xxx) 转回 @import 'xxx' */ const through = require('through2') module.exports = () => through.obj(function (file, enc, next) { if (file.isNull()) { next(null, file); return; } try { const reg = /(?:^|\s)?(?:@import)(?:\s)(?:url)?(?:(?:(?:\()(["'])?(?:https?:)?([^"')]+)\1(?:\))|(["'])(?:.+)\2)(?:[A-Z\s])*)+(?:;)/ig file.contents = new Buffer.from(file.contents.toString().replace(reg, '@import "$2";')) next(null, file) } catch (error) { next(null, file) } }); .wxml 压缩WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构。 其实跟 HTML 类似的标签语言,我们可以通过现有的 HTML 压缩库来对其进行压缩。这里我们可以用 gulp-htmlmin 。 const htmlmin = require('gulp-htmlmin') task('wxml', function () { return src('dist/**/*.wxml').pipe(htmlmin({ caseSensitive: true, // 大小写敏感 removeComments: true, // 删除 HTML 注释 keepClosingSlash: true, // 单标签上保留斜线 collapseWhitespace: true,// 压缩 HTML ignoreCustomFragments: [ / |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |