引入第三方包导致代码包体积增大N倍
在业务最初的页面设计中，需要根据后端返回的词汇数组进行分组，并使用 IndexList 组件进行词组分类。根据单词的首字拼音，从 A - Z 进行分组。所以我引入了 pinyin 库，一开始在模拟器中运行一切正常，当我想真机浏览的时候就报代码包体积过大的错误，代码体积超过了 10M。于是我进行代码压缩，关闭 sourceMap 以及打包成生产模式进行预览，但是包体积仍然过大。这也是我进行分包的原因，分包前我还没查到原因，所以就行了分包，但是分包后体积依然超过单包 2M 的极限。所以我从打包后的代码中去查。发现 pinyin 库被单独打包成了一个 vendor.js 作为公共 js 文件被引入，pinyin 中的所有字符的枚举以及方法都被打包进来，大小足有 6M，这是不能依靠分包解决的。
网上尽管有引入第三方 js 库的方法，但是由于 pinyin 体积过大，且用处在我的项目中很少，所以就更换了设计图，删除了 pinyin 库。但是这里的坑是影响巨大的，如果你想在项目里使用第三方库，例如图表库或者其他的大型 js 依赖，就得小心了。
静态资源打包后失效
项目中用到了几张图片，在本地模拟器中一切正常，但是打包后总是显示不出来。网上有人讨论是资源路径不对，如果分包了需要在资源路径前添加分包名。尝试了一番并不能解决问题，我连续更换了图片所在位置，从一开始的全局
static 文件夹到使用位置的文件夹，都不起效果。最终我还是怀疑问题出现在 webpack 身上，可能是打包时 loader 对静态资源的处理出现了问题。由于项目中只使用了几张图片，所以我想到的办法是直接转换成 base64 来参与模块化，这样 100% 能解决问题。最终的测试效果也在意料之中，图片被正常加载出来了。做到这里其实我没有深究下去，但是既然知道问题出现在 webpack 打包上，那也许重写下 webpack 配置也许就行了。这里留着后续拓展了，暂时没有去做，后续有结果了再补充进来。文本输入组件手机端无法回车换行
手机端的输入是使用输入法键盘，区别于 PC 端。模拟器或者浏览器始终是 web，测试时使用键盘 Enter 键轻易就能换行。但是在手机端却不行，手机端的 Enter 肩负很多功能，例如搜索、进入、下一个等。在 uniapp 中，键盘的 Enter 默认值是
done，这样键入 Enter 时键盘就会自动收起，并不能实现输入换行。- THE END -
最后修改：2025年7月4日
非特殊说明，本博所有文章均为博主原创。
如若转载，请注明出处：http://www.nnpyzwz.com/index.php/2025/07/04/uniapp%e8%b8%a9%e5%9d%91%e8%ae%b0%e5%bd%95/
共有 0 条评论