静态资源提取插件

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

https://www.notion.so/wakedata/wakeapp-taro-extra-plugin-666effa98e4f46ceab5a02ade0e3c8ff

安装

$ pnpm 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 默认运行方式运行。

接下来

你可以将提取出来资源发布到 publicPath 匹配的 CDN 上。

支持 CDN 查询字符串

因为默认的名称为 [name]-[hash:8].[ext][query] ，所以你可以添加查询字符串, 例如:

import png from './directory/image.png?width=300&height=300';

// 将会编译为 <PUBLIC_PATH>/image-<HASH:8>.png?width=300&height=300

Issue

如果 Taro 升级 Webpack 5，需要重构。