uniapp开发小程序,uni-app 小程序
UNI-APP开发(仿饿)开发课程：进入学习
背景
在微信小程序的开发过程中，随着业务逻辑的日益增长，一些问题也凸显出来。
首先，我们发现在dev模式下，本地的包大小已经达到了4m。在这种情况下，不再可能在dev模式下使用真实机器调试。
其次，小程序搭建好之后，大概在1.8M左右，而且以后还有相当多的业务需求要开发，包的大小肯定会更大。
这时候你要优化小包装尺寸。下面分享一下我的定位过程和解决方案。虽然我们用uni-app开发，但是思路是通用的。希望能帮到你。
如何减小包大小
代码分析
首先分析一下包裹在哪里。
打开本地代码目录以检查文件大小。可以找到common/vendor.js和page，js占了page的大部分组件。
在构建编译模式下，已经启用了代码压缩，需要考虑其他优化方法。此时您可以使用webpack-bundle-analyzer插件。可以帮助分析vendor.js中有哪些js模块，哪些模块比较大，以便我们进一步优化代码。
通过这个插件，发现了以下两个问题。
问题一： uni-app 自定义组件模式编译 tree shaking 无效
这一段如果不是用uni-app开发的可以跳过。
通过代码分析发现，有些模块应该是树摇的，但却是打包的。基本上确定树摇没生效。
也是webpack4 babel7。在不使用uni-app直接使用vue-cli create项目的前提下，摇树是没有问题的。使用uni-app创建新项目时，树摇动无效。
在对babel配置进行故障排除时，发现uni-app在创建项目时设置了模块：“commonjs”。修改后，树摇ok的演示。但是当我回到项目并编译它时，又出现了一个错误。继续定位，发现是uni-app 自定义组件模式编译问题。目前uni-app已经修复了我说的bug，虽然还没有正式发布。
当然，不使用uni-app自定义组件模式编译也可以解决问题。uni-app也支持模板模板模式，但是会有一些开发差异和性能差距。如果有兴趣，可以看看这篇文章。
问题二：部分库不支持 tree shaking
有些库(比如lodash)本身不使用导入/导出，所以webpack不能treeshake它们。我们可以在不同的情况下优化这些库。
首先你可以在网上找一下是否有对应库的esm版本可以替换，比如lodash-es。
其次，从代码分析中可以看出，如果库的各个模块在不同的文件中，而入口文件只是一个统一的入口，那么我们可以通过修改编写方式按需加载，比如
从“lodash/add”导入add；
从“ant-design-vue/lib/button”导入按钮；复制代码我们也可以使用babel-plugin-import插件统一实现那些库的按需加载。其本质是根据编译时的配置统一修改加载路径，而不必手动修改代码。
如果最后什么都不管用，那要么接受，要么自己重写，为社区做贡献~
规范模块开发
为了避免无法treeshake的麻烦，我们在开发npm模块时也需要遵循一定的规范，以减少封装模块的大小。
同时支持 commonjs 和 es module
我们的模块需要支持commonjs和es模块。这样可以满足commonjs开发的用户，支持摇树。
如何实现？如果你的代码是typescript，以@sentry/browser为例，可以在编译时编译cjs和esm代码，如下
//package.json Build : run-s Build:dist Build:ESM Build:bundle ， build:bundle: rollup - config ， Build:dist : TSC-p ts config . Build . JSON ，Build:ESM : TSC-p ts config . ESM . JSON ，复制代码然后在package . JSON中指定两个门户和无副作用标识
Main: dist/index.js ， module: esm/index.js ， side effects: false，复制代码以便webpack解析模块(解析规则)时，根据需要优先解析esm目录。并且当没有识别出副作用时，执行树摇动。
如果你的代码本身是es6，你也可以这么做。
模块: src/index.js ，复制代码
第三方自定义组件
。如果使用第三方微信自定义组件，由于引用在json文件中，webpack在编译时无法通过entry解析相关文件，所以不会进行编译、压缩等操作。这个时候就需要我们自己去处理了。而且由于webpack不处理，树摇自然也支持不了，建议这样引用组件：尽量避免。
分包
小程序分包也是一种常规的优化方案。
经过分析，有些大的页面可以分成子包。如果单个页面依赖于第三方自定义组件，而第三方组件又相当大，那么也可以考虑将页面分成子包。所以是尽量避免将第三方自定义组件放在 globalStyle，不然放不进分包。
大图不要打包
小程序里的大图，尽量避免打包进去，要放在CDN里，通过url加载。我们的方法是在开发过程中加载本地映像，在CI/CD链接中自动发布映像，并重写地址。
如何解决真机调试问题
首先查看编译文件，发现common/vendor.js庞大，足有1.5M其次页面和组件也有1.4M，占js的大小和绝大多数。
js文件为什么这么大？主要是因为dev模式下默认没有压缩，当然也没有树摇。
我的选择是修改编译配置，在 dev mode 压缩 js 代码。当地代码已减少到2M。预览尺寸缩小至1.4M。请参考以下配置：
//vue.config.js
configure web pack:()={ if(isDev isMp){ return {
优化：{
最小化：真，
},
}
}
}复制代码。这看起来并不是一个好的解决方案，但却简单有效。还要考虑过度包装，但是分包解决不了common/vendor.js这个巨大的问题预览的时候包还是很大的。有其他好主意请留言~
更多相关免费学习推荐：微信小程序开发
以上是uni-app小包装尺寸优化的细节。更多请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。