## 一、背景 古茗会员体系升级需要在小程序首页接入炫酷的动画，通过技术选型最终敲定了阿里出品的`@galacean/effects`，编译后体积`599.3KB`，小程序主包限制最大也就只有`2MB

在使用Taro开发偏大型小程序应用过程中，我们可能经常会遇到这么个问题：小程序的主包体积超过了2M，没办法发布。针对这个问题，本文讲一讲我在业务中经常使用到的4种优化手段。

旧代码，导致自己没法完全找到所有的图片相关代码实在坑爹，所以想办法一次性解决。 一开始想到的办法就是项目打包完毕后将图片文件夹内的图片全部上传，配置url-loader将图片路径全部替换成网络路径，途中遇到很多坑，待我一一道来。 我这里使用的是（afterEmit）：生成资源到…

Q1:tapable解决的问题？tapable是个独立的库webpack中大量使用了这个库tapable主要是用来处理事件，解决的问题有点类似EventEmitter，不过功能更加强大Q2:tapab

何为插件(Plugin)？专注处理 webpack 在编译过程中的某个特定的任务的功能模块，可以称为插件。

对 Babel 的配置项的作用不那么了解，是否会影响日常开发呢？老实说，大多情况下没有特别大的影响（毕竟有搜索引擎）。 不过呢，还是想更进一步了解下，于是最近认真阅读了 Babel 的文档，外加不断编译验证，输出了本篇文章，为了更好的阅读体验，修修改改，最终算是以我个人比较喜欢…

近几个月，接手了一个老项目的重构规划，有多老呢？就是前端青铜时代的项目，一个前后端都在同一个锅里的项目、完全没有使用任何的打包工具。 前端 html、css、js三剑客 加上 jQuery 复制粘贴就是干。 前端不够后端来凑。如果前端有一些需求不是很复杂的话，后端人员有时候也会…

这一章讲打包体积优化，这个也算是最重要的一章了，我之前可是花了很多时间去查资料怎么优化打包体积的，不同版本的webpack之间还有一些区别，所以也算踩了很多的坑，所以这一章会比较长。 可以清晰的看到antd和react-dom就占了一半多，下面来优化。 1. 修改mode 2.…

另外可以发现并不是一个 token 对应一个 Node，等号左右必须都有值才能组成一个声明语句，否则会作出警告，这就是 eslint 的基本原理。最后所有的 Node 组合在一起就形成了 AST 语法树 通过 @babel/traverse 我们能够轻松的找到 await 表达…