Taro3踩坑实录

该文章记录本人在使用taro3开发项目时遇到的一些问题，会持续进行更新

1.实时编译，体积过大，无法预览

问题：使用taro3+vue2.0创建项目，运行--watch时，开发者工具预览时提示体积过大，无法预览

解决思路：首先查找taro3相关文档，看看有无官方解决方法，再和用过该框架开发的同事沟通，看看有无解决方案

解决方法探寻：

1.官方文档对terser的编译配置说明，由于编译命令需根据不同的环境切换，所以无法在--watch时固定设置process.env.NODE_ENV 为 'production'

2.根据同事建议，使用webpack-bundle-analyzer对项目体积进行分析，发现app.js体积高达1.2M，很明显是引入了一些体积大的插件

根据taro3的issue，在package.json里面查看模块，发现taro-ui-vue模块的引入导致体积暴增，由于该项目暂未使用，去除

以下是去除后的分析结果

预览包体积下降了很多，可以进行正常的编译即时预览

可以正常进行预览，但是总包体积仍过于巨大，还需后续持续优化更新

2.不同页面引入同一组件，样式错乱 

解决方案：在 src 下创建 app.scss ，然后在 app.tsx/app.jsx 中引用这个文件就好了

这个问题可能跟开发的习惯有关，有些开发会有引入公共样式的习惯，有些开发没有。如果没有引用公共样式的话，又有代码洁癖的人会把 app.jsx 上引入 的 「import './app.scss」删除，然后问题就会出现。Taro 是在编译后在「app.wxss」用「@import './common.wxss」引入。但是如果我们在 app.jsx 中没有「import './index.scss」，Taro 在编译后也不会生成「app.wxss」，结果就是「common.wxss」也没有被引入了。

建议 Taro 默认都生成一个「app.wxss」避免类似问题

可以参考该issue：https://github.com/NervJS/taro/issues/8168