1. 小程序静态资源处理方案

方案 描述 是否占用主包
小程序原生方案 将静态资源放在小程序根目录下,然后通过绝对路径引用。
例如
  /images
     foo.png
  app.json
  app.ts
  app.wxss
  index.js
  index.json
  index.wxml
  index.wxss

小程序中可以通过 /images/foo.png 这类形式引用 | 可能。 放在子包目录下,则占用子包体积 | | Taro require/import 导入 | 例如 import foo from  ’./foo.png’ 小于 10k 的资源会转换为 DataURI 内联。 | 是 | | taro-extra-plugin | 还是通过模块导入的形式引用。这些静态资源会提取出去,返回 CDN 链接。 | 否 |

2. 静态资源提取

@wakeapp/taro-extra-plugin 静态资源提取插件。 默认会提取视频、图片、字体等资源, 你可以将这些资源放置到 CDN,减少 主包体积。

安装

$ yarn add @wakeapp/taro-extra-plugin -D

使用

配置 Taro 项目,config/index.js

const config = {
  outputRoot: `dist/${process.env.TARO_ENV}`,
  plugins: [
    [
      '@wakeapp/taro-extra-plugin',
      {
        publicPath: '<https://wakeapp-demo.wakeapp.cn/>', // CDN 路径, 必填,必须为 HTTP 路径
				// name: '[name]-[hash:8].[ext][query]',        // 文件名称
				// outputPath: '../static',                     // 输出路径, 相对于小程序的 output 目录。
																		                    // **比如小程序构建输出到 dist/weapp, 那么提取的资源将放置在 dist/static 下**
      },
    ],
  ],
};

**该插件只有生产环境 build 才生效。**开发环境会按照 Taro 默认运行方式运行。