【2022更新】Web Components中引入外部CSS的9种方法

本文是将 Taro 3.0.14 跨版本升级到 Taro 3.5.3 项目实战，基于 Vue 2.x 的框架，如果是 Vue 3 或 React 版本建议多参考官方文档相关说明。

背景

团队中微信小程序项目采用的是 Taro 框架，在 Taro 3 出来之后，就使用 Taro 3.0.14 版本进行实际项目开发。随着项目的不断迭代，发现一个问题，小程序的主包越来越大（从项目开始就采用了分包），直到有一天超过了2M，严重影响到了项目的正常迭代。在这以前，已经进行了一些常规的优化：如分离 moment.js 的语言包；通过微信小程序开发者工具自带的依赖包分析，再配合 webpack-bundle-analyzer 插件，对主包中引入比较大的业务代码做拆分、优化等等。

明明很多代码只在分包中引用，依然会引发主包的体积变大，原因是在开发小程序时， Taro 编译器依赖 SplitChunksPlugin 插件抽取公共文件，默认主包、分包依赖的 module 都会打包到根目录 vendors.js 文件中（有一个例外，当只有分包里面有且只有一个页面依赖 module 时，会打包到分包中依赖页面源码中），直接影响到小程序主包大小，很容易超出 2M 的限制大小。官方也在文档中给出了对应的解决方案，修改 SplitChunks 默认配置，但是注意的是将 Taro 升级到 3.3.11 及以上版本。

为了保证业务正常迭代，在做了一定的技术调研后，决定将现有的项目做一次 Taro 跨版本升级。本文是将项目从 Taro 3.0.14 升级到 Taro 3.5.3 的一次记录。

目录

• 版本差异梳理
• 升级需要调整的代码
• 升级前后对比

版本差异梳理

此部分整理了一些 Taro 大版本的更新说明，尤其是一些有破坏性的变更（breaking change）。如果不感兴趣，可以直接跳过此部分，进入升级需要调整的代码模块

下面整理了一些个人认为对升级框架可能有帮助的点，汇总如下：

版本号	更新说明-微信小程序	更新说明-H5	需要关注的 Breaking Change
3.5.2

| 优化主入口引用样式文件编译问题 | 新增支持 movable 组件 fix ；prebundle: 默认继承 webpack 配置，并支持开发者自定义拓展 ||
| 3.5.0 | 对小程序的内部实现进行优化，减少约 50k 包体积，同时降低内存占用，减少 setData 发送的数据量 |||
| 3.4.14 | 优化 Swiper 组件的样式引入 |||
| 3.4.12 | 优化智能提取分包依赖插件 | 修复 Swiper 组件随着 tab 页面切换，总是跳到最后一个元素开始轮播的问题 ||
| 3.4.11 | 修复 iOS 视频组件全屏事件导致的错误；修复 iOS 视频组件层级问题；修复 iOS 视频组件在沉浸式状态栏下，退出全屏时的定位问题；修复 onProgressUpdate 方法错误返回值；修复 tabbar 在配置特殊自定义路由情况下，从非首页进入应用情况下，图标显示错误问题 |||
| 3.4.8 | 支持微信小程序 Input 组件的安全键盘属性 |||
| 3.4.5 | 修复独立分包页面的 Page 构造器被重复调用，从而报页面重复注册异常的问题；修复独立分包页面 base.wxml 依赖引用异常的问题；修复小程序无法绑定 style 属性的问题；抹平 Taro.getExtConfig API 在支付宝小程序与微信小程序的返回值差异；修复 Vue 不能使用 module 模式的 CSS Module 的问题；修复公共样式不能覆盖全局样式的问题 | 修复 Vue3 使用 ref 引用时未引用原生组件实例的问题；Vue3 支持在 JSX 中使用 Taro 组件；修复设置 basename 后不跳转默认路由的问题；修复 Textarea 设置了 min-height 在 caculateContentHeight 时会陷入死循环奔溃的问题；Taro.request 请求增加 response 判断 ||
| 3.4.3 | 支持微信小程序 Button 组件的 open-type 属性以获取头像昵称 |||
| 3.4.0 | 运行时体积优化，相比 Taro v3.3 版本大约减少了 30k 空间 |||
| 3.3.20 | 优化 MiniSplitChunksPlugin 的运行性能 |||
| 3.3.13 | 确保 onShow 在