npm i
这里的 npm run build:weapp 只需要执行一次 这个后期可以靠直接输出一个模板项目来解决 就不需要 taro 参与了 npm run build:weapp && npm run server
简单来说就是一套代码 会在开发环境中编译成正常的 vue react 代码 在生产环境中编译成小程序代码 通过这种方式来让开发环境的编译加速 借助 vite esbuild 这种现代化工具可以有很明显的效果
其实实现原理很简单 先来了解一下小程序打包为什么会慢的原因
微信开发工具监听 dist 文件变化 -> taro build -> 将打包好的文件输出到 dist 目录 -> 微信开发工具将所有的 wxml 统一编译 -> 然后发起一个 ws -> 微信开发工具监听到这个 ws 以后执行对应的 command -> 小程序就会更新了
所以整个的链路是很长的 其次还有一点就是微信开发工具需要将所有的 wxml 都统一编译 这就导致你项目越大 编译时间越长 因为这部分是完全没办法复用的
要解决这个其实也简单 首先突破在小程序不能直接访问 docuement 的限制 然后使用正常的 esbuild 或者 webpack 打包工具来打包 不让微信开发工具来参与 自己来控制到底要不要刷新
其次通过修改 wx 让你可以在自己的网页中直接唤起 wx 的所有功能 并且可以正常使用
首先 我上面这样做以后 微信开发工具是无法正常识别出我的 dom 的 这个时候就得这样做 在微信开发工具页面 按下 cmd + shift + p 唤起一个调试页面 然后在里面输入 enable AppServer debug Elements 就可以唤起我们的页面了 你可以在上面像我们网页浏览器一样正常调试页面了