闻心阁

一蓑烟雨看苍生,半壶浊酒笑红尘

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

2021-03-18 约 1 分钟读完 搬砖秘籍

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

继续阅读

开发一个基于uni-app的imgcook DSL

2021-03-07 约 2 分钟读完 搬砖秘籍

最近看到了阿里的前端智能化的实践:imgcook 由设计稿一键智能生成代码的大厨,由设计稿直接生成前端代码,试用了一下,比zeplin和蓝湖做的更进一步,可以直接集成到项目开发的过程中。但发现一个问题,imgcook官方支持的DSL并不多,我们团队是使用Uni-app做跨端开发的,希望能将设计稿直接生成符合uni-app的代码,但官方没有,找了一个其他开发者贡献的,也没有找到合适的,于是自己动手写(组装)了一个。

继续阅读

使用Husky管理项目的Git Hooks(以配置Uni-app的ESLint和Commit Lint为例)

2021-03-07 约 1 分钟读完 搬砖秘籍
Git目前是毫无争议的项目版本管理的王者,而前端的项目大了之后我们通常需要利用一些Git Hooks来保证项目的质量。包括但不限于: eslint tslint 单元测试 E2E测试 style lint commit lint others checks 有的同学可能要说,没有这些项目质量也会很好,是的,一般这么说的,要么项目小,要么团队人少。如果你的项目人数>30,又是多分支开发的话,就会大概率需要这玩意。 初识Husky 原生的Git Hooks写法比较麻烦,Husky 做了比较好的封装。截止本文发布之日(2021-03-07),Husky已经发布了5.x版本,建议使用最新的版本,因为它有几个优势: 0依赖,没有依赖第三方的任何JS包 轻量,20K左右,Husky4要1MB 快,0.01s的量级,Husky要0.5s 跨平台,Linux、macOS、Windows都支持 安装 npm install husky --save-dev && npx husky init 是,就这一句就够了,自动会初始项目。观察你的项目,你会发现多了一个.husky目录,package.json中添加了prepare的命令: 添加ESLint 这里有一个策略,如果每次提交都进行全局的ESLint Check的话,效率会很慢。所以我们需要添加一个策略,就是每次提交的时候,只对你所修改的文件的做ESLint,这样效率会提高不少。要实现这个功能,需要借助一个非常好用的包:lint-staged。 先安装: npm install lint-staged --save-dev 配置命令: lint-staged有多种配置方法。 package.json .lintstagedrc .lintstagedrc.json .lintstagedrc.yaml .lintstagedrc.yml lint-staged.config.js, .lintstagedrc.js, or .lintstagedrc.cjs file in JS format 我个人还是习惯用package.json里写,也可以选择其他的。uni-app的Lint配置比较特殊,配置如下: "lint-staged": { "src/**/*.{js,ts,tsx,vue}": [ "vue-cli-service lint --fix src" ] }, 老的写法里还会加上git add这种,新版本已经不用了,都会自动加上。 配置Commit Lint 说起Commit Lint,有一个非常牛逼的库推荐给大家:conventional-changelog/commitlint: 📓 Lint commit messages 继续阅读

uni-app 启用 tree-shaking

2020-04-14 约 1 分钟读完 搬砖秘籍
使用了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中已经把没有引用到的函数给删除了,可以说是一个意外的惊喜了。 风险 目前上面的测试仅针对于示例登录项目的测试,修改此文件带来的其他风险暂时无法评估。