Taro引用微信小程序人脸核身问题总结_faceid-interactive-vedeo-mpsdk

基础信息

Taro版本 3.0.15

人脸核身SDK：faceid-interactive-video-mpsdk （这个SDK名字可能和腾讯开发文档上的有区别，出现的问题都差不多）

开发预览主包超限

由于小程序主包限制2M，而微信小程序人脸审核SDK就占用500K。如果直接引用人脸核身小程序SDK，加上Taro编译后的胶水代码。在开发的时候就会出现超出2M的情况。

解决方案

1. 将人脸核身SDK放入分包目录
2. 修改SDK内部路径代码，由于人脸核身SDK 默认是放在主包目录，内部路径引用也是直接根目录。所以需要根据自己的分包情况修改里面路径引用
   修改faceid-interactive-video-mpsdk内部文件路径引用方法
   1、使用vs code全局搜索替换 举个例子

   

   2、自己写个node程序统一处理，有利于后期sdk升级。

上面解决sdk 文件存放问题。但是这样处理还是不够的。因为Taro会把一些公用文件编译打包至comm.js。这个就需要把这个SDK踢出Taro编译。

1. 修改 config文件夹下面 配置文件 增加copy配置

   module.exports = {
     outputRoot: `./dev/${process.env.TARO_ENV}`,
     defineConstants: {},
     copy: {
       patterns:
         process.env.TARO_ENV === 'weapp'
           ? [
               {
                 from: 'src/pages_sub/faceid-interactive-video-mpsdk/',
                 to: 'dev/weapp/pages_sub/faceid-interactive-video-mpsdk/',
               },
               
             ]
           : [],
     },
     mini: {},
     h5: {},
   };
   

    

2. 修改app.config.js，不要将sdk里面的page配置进app.config.js pages 里面，否者Taro还是会编译文件。可使用webpack 插件配合处理app.config.js

   export default {
     outPushPage: {
       subPackages: [
         {
           root: 'pages_sub',
           pages:
             process.env.TARO_ENV === 'weapp'
               ? [
                   'faceid-interactive-video-mpsdk/room/room',
                   'faceid-interactive-video-mpsdk/index/index',
                 ]
               : [],
         },
       ],
     },
     pages:
       process.env.TARO_ENV === 'weapp'
         ? []
         : [],
     subPackages: [
       {
         root: 'pages_anys',
        pages:[]
       },
       {
         root: 'pages_sub',
         pages:[]
       },
     ],
     networkTimeout: {
       request: 60000,
       downloadFile: 100000,
     },
     debug: false,
     
   };
   

   config/index.js  增加 webpackChain 配置项

   import path from 'path';
    
   const changeAppJson = require('../webpackPlugin/changeAppJson');
    
   function resolvePath(str) {
     return path.resolve(__dirname, '..', str);
   }
    
   const config = {
     projectName: '诺诺网小程序',
     date: '2020-10-22',
     designWidth: 750,
     deviceRatio: {
       640: 2.34 / 2,
       750: 1,
       828: 1.81 / 2,
     },
     sourceRoot: 'src',
     outputRoot: `./dist/${process.env.TARO_ENV}`,
    
     defineConstants: {},
     // copy:{
    
     // },
     framework: 'react',
     
     mini: {
       miniCssExtractPluginOption: {
         ignoreOrder: true,
       },
       csso: {
         enable: true,
         config: {
           // 配置项同 https://github.com/css/csso#minifysource-options
         },
       },
       postcss: {
         autoprefixer: {
           enable: true,
         },
         pxtransform: {
           enable: true,
           config: {
             // pxtransform 配置项，参考尺寸章节
             selectorBlackList: ['body'],
           },
         },
         url: {
           enable: true,
           config: {
             limit: 1024, // 设定转换尺寸上限
           },
         },
         cssModules: {
           enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
           config: {
             namingPattern: 'module', // 转换模式，取值为 global/module
             generateScopedName: '[name]__[local]___[hash:base64:5]',
           },
         },
       },
       compile: {
         exclude: [resolvePath('src/pages_anys/utils/crypto-js')],
       },
       commonChunks (commonChunks) {
         // commonChunks 的取值即为默认的公共文件名数组
         return commonChunks
       },
       webpackChain(chain, webpack) {
        
         chain.plugin('changeAppJson').use(changeAppJson);
       },
    
       
     },
     h5: {
       
     },
   };
    
   module.exports = function (merge) {
     if (process.env.TEST_ENV === 'test_domain') {
       return merge({}, config, require('./prod_test'));
     }
     if (process.env.NODE_ENV === 'development') {
       return merge({}, config, require('./dev'));
     }
    
     return merge({}, config, require('./prod'));
   };
   

   changeAppJson.js 参考：webpack 插件开发

   /**
    * @desc 将第三方sdk的page手动写入 app.json 不使用Taro打包
    *
    */
   const deepClone = require('./utils');
    
   function ChangeAppJSonPlugin() {}
    
   ChangeAppJSonPlugin.prototype.apply = function (compiler) {
     compiler.plugin('emit', function (compilation, callback) {
       var filelist = '';
    
       for (var filename in compilation.assets) {
         if (filename === 'app.json') {
           // 获取app.json 内容
           try {
             const source = JSON.parse(compilation.assets[filename].source());
             const outPushPage = source['outPushPage'];
             const newPage = deepClone(outPushPage, source);
             delete newPage.outPushPage;
             filelist = JSON.stringify(newPage);
           } catch (err) {
             console.log(err);
             callback();
           }
         }
       }
    
       // 将这个列表作为一个新的文件资源，插入到 webpack 构建中：
       compilation.assets['app.json'] = {
         source: function () {
           return filelist;
         },
         size: function () {
           return filelist.length;
         },
       };
    
       callback();
     });
   };
    
   module.exports = ChangeAppJSonPlugin;
   

   到这基本解决 引用SDK编译超限问题。上面只是提供一种解决思路。应该还有其他解决方法，可自行探索。快乐源于探索