uni-app中NPM打包机制及优化方案

团队使用uni-app来开发微信小程序，开始用的挺舒服的，后面项目大了，发现项目不太好维护，并且主包会超，于是做了2个方案。一个是将公有的组件及方法抽象成公共的NPM包（团队搭建了私有NPM），一个是使用了小程序分包机制。这种方法开始有一定效果，后来发现主包体积还是飞速扩张，但主包的业务基本没加，于是探究了一下uni-app中针对NPM打包的优化方案。本文尝试从以下几个方面做个总结。

继续阅读

uni-app 启用 tree-shaking

使用了uni-app cli开发小程序和 H5 的跨平台应用，打包代码的时候为了追求体积，尝试启用 tree-shaking ，按照 uni-app官方的说法，这项目功能是给 H5 平台用的，不过测试了一下，发现结果还不太一样，这里做一个记录。 H5 平台 在 mainfest.json 中添加如下的配置 "h5": { "optimization": { "treeShaking": { "enable": true } } } 这是不够的，还需要改babel.config.js， '@vue/app', { modules: false,//原来是commonjs useBuiltIns: process.env.UNI_PLATFORM === 'h5' ? 'usage' : 'entry' } 这样就可以启用 H5 平台的treeShaking，使用示例项目打包一下是可以的。 微信小程序平台 默认情况下，微信小程序平台是不行的，但在执行了上面的babel.config.js的修改之后，发现打包出来的vender.js中已经把没有引用到的函数给删除了，可以说是一个意外的惊喜了。 风险 目前上面的测试仅针对于示例登录项目的测试，修改此文件带来的其他风险暂时无法评估。

使用 Less 替换 wxss 开发微信小程序

微信小程序开发中默认使用的 wxss 做为样式文件，这货对应成前端就是 CSS 文件，所以通常写 wxss 文件的时候会很痛苦。因为我已经完全放弃了小程序自带的编辑器（参考：wxapp.vim——使用Vim开发小程序利器），于是尝试在微信小程序开发中引入 Less 来自动编译 wxss。 思路 启用一个 gulp 任务，在文件更新的时候自动将 .less 文件编译成 .wxss 文件。 主要用到了 2 个 gulp 插件，gulp-less 和 gulp-rename。前者用来编译 Less 文件，后者用来将编译出来的 css 文件重命名为 .wxss。 实现 代码： var lessPath = ['./app/**/**/*.less', './app/**/*.less']; /** * 本地监视less的文件 */ gulp.task('less', function () { return gulp.src(lessPath) .pipe($.plumber()) .pipe($.less()) .pipe($.rename(function (path) { path.extname = '.wxss'; })) .pipe(gulp.dest('./app')); }); // 静态服务器 gulp.task('style', function () { gulp.watch(lessPath, ['less']); }); 使用 开发前运行 gulp style，剩下的事情就是写 Less 了，再不也用管什么 wxss 了。

wxapp.vim——使用Vim开发小程序利器

微信提供的小程序开发工具自带了编辑器，不过习惯了 Vim 的我使用起来感觉很不顺手，于是切换到 Vim，好在 Vim 中已经有了开发小程序的插件：chemzqm/wxapp.vim: 提供微信小程序开发全方位支持的 vim 插件 安装 使用 NeoBundle Vundle vim-plug 对应的安装方法。 NeoBundle 'chemzqm/wxapp.vim' Plugin 'chemzqm/wxapp.vim' Plug 'chemzqm/wxapp.vim' 使用 安装上这个插件基本的高亮已经不成问题了，其实这个插件还提供了很多有用的功能，配合 YouCompleteMe 可以更高效,推荐参照官方的地址。 这样使用小程序开发工具只做预览和调试，开发的事情就交给 Vim 了。

Linux下小程序开发方法总结

小程序开发要使用官方的开发工具，果然腾讯也很完美的发行了 Windows 和 Mac 版本。对，没有 Linux 版本。之前因为这个问题，又因为项目催得急，我楞是切换到 Windows 下开发了3个月。最近几天尝试摸索一下 Linux 下开发小程序的方法。 方案一 虚拟机大法。 帅哥（我崇拜的大神） 使用的就是这个方法。 不过使用这个方法也有局限，虚拟机要 Win7 以上的系统（xp我这边测试不行），所以要保证有足够的机器配置。并且不支持共享目录，所以想在 Linux 下写代码，虚拟机中预览是不太可行的。 方案二（推荐） 使用这个工具： cytle/wechat_web_devtools: 微信开发者工具(微信小程序)linux完美支持，目前我使用的也是这个方法，目前来说是亲测可用的。 不过有不足之处是不能实时安装官方最新版本。 方案三（未实践） 这个方案是我没有验证过的，为了解决方案二中不能实时更新的问题，我们可以将方案一做一个变通。有以下几个想法： 使用 dropbox 同步代码（估计速度不会快） 使用 GoodSync、Allway Sync等软件同步（最有可能有效的方法） 后记 目前我使用方案二够用，如果有一天不能用了，我会亲测试方案三，相关内容再来补充。以上。

小程序开发 webview 中无法获取参数的解决方法

小程序开发已经支持 web-view 的跳转，最近开发的一项功能正好APP与小程序均要使用，于是自然想到使用 web-view 的方式。场景是这样的： 用户打开APP/小程序，查看自己个人信息卡片，根据不同的 userid 返回不同的卡片样式。 H5实现 H5实现很简单，直接使用页面类似地址 https://xxx.com/xxx.html?userid=2345。 所以可以看出 2345 这个 userid 是需要我们动态传入的。 小程序实现 小程序中跳转 web-view 需要生成一个新的页面，然后里面嵌入一个 <web-view></web-view> 组件。 所以想当然的可以这样写： <web-view src="https://xxx.com/xxx.html?userid={{userid}}"></web-view> 其中 userid 我们需要在跳转之前传入，并在当前的 onLoad 中获取一下，代码如下： /** * 页面的初始数据 */ data: { userid: '' }, /** * 生命周期函数--监听页面加载 */ onLoad: function (option) { if (option.userid) { this.setData({ userid: option.userid }) } }, 遇到的问题 使用上面的方法在 iOS 下完美，但是在 Android 下经常会出现 H5 页面没有获取到 userid 的情况。后来思考了一下，应该是 <web-view> 组件在没有取到参数的情况下（也就是 onLoad 没有执行完成）的时候就已经打开了我们的 H5 页面。 继续阅读