方案 | 描述 | 是否占用主包 |
---|---|---|
小程序原生方案 | 将静态资源放在小程序根目录下,然后通过绝对路径引用。 | |
例如 |
/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 链接。 | 否 |
@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 默认运行方式运行。