React App Framework - 9. Single Build

背景

在框架开发完成后, 已经有好几个子应用开发嵌入了, 不过突然来了个新需求, 需要单独部署某个子应用到一个独立的环境提供服务, 而且由于是测试性质的, 还需要禁用掉登录鉴权

独立打包

方案一: 修改配置

这个实现起来很简单也很自然, 由于我们的子应用都是根据配置去container文件夹动态import的, 在需要单独部署的情况下, 通过环境变量注入将其他子应用的配置去掉就行, 但是这样存在一个问题, 由于我们的import()实现的是动态引入, 所以webpack还是会将container路径下的所有子系统打包, 包括他们的依赖项等等, 会增加最终页面大小和打包时长.

方案二: 修改打包脚本

这个是我实现的最终方案, 通过修改webpack的打包脚本, 实现只对指定子应用内容打包, 可以极大的缩短打包时长, 和页面大小

实现原理就是通过webpack.IgnorePlugin插件, 在打包时候忽略掉其他所有子应用文件夹, 同时通过环境变量注入当前运行是单应用场景, home页面做一下兼容适配即可

// webpack.single.config.js
const plugins = [];

const singleApp = process.env.SINGLE_APP || '';

const defaultDefineVariables = {
  'process.env.single-app': `null`,
};

if (singleApp) {
  plugins.push(
    new webpack.IgnorePlugin({
      resourceRegExp: new RegExp(`^\\.[/\\\\](${apps.filter((app) => app !== singleApp).join('|')})`),
    }),
  );
  defaultDefineVariables['process.env.single-app'] = `'${singleApp}'`;
  plugins.push(new webpack.DefinePlugin(defaultDefineVariables));
}

// config/constants.ts
const SINGLE_APP: AppOptions = process.env['single-app'] as AppOptions;

开发完成后带上analyze打包一次, 可以发现所有其他子应用的引用和模块都不存在了, 包括它们内部引入的其他模块, 只剩下当前子应用的部分, 页面体积和文件数量都减少了非常多

禁用鉴权

这个实现起来流程比较简单, 但是内容比较繁琐, 首先在各子应用的config中添加needAuth字段, 然后在app-main和left-menu中添加对应的判断逻辑, 最后通过环境变量实现打包时修改app的needAuth值

// webpack.single.config.js

const needAuth = !process.env.NO_AUTH || true;

const defaultDefineVariables = {
  'process.env.need-auth': JSON.stringify(needAuth),
};

plugins.push(new webpack.DefinePlugin(defaultDefineVariables));

// config/constants.ts

const NEED_AUTH: boolean = process.env['need-auth'];

if (!NEED_AUTH) {
  _.map(APPS, (app) => _.set(app, `needAuth`, false));
}

全局组件的各处鉴权控制代码的逻辑由于比较零碎, 这里就不再赘述了, 实际使用的时候也可以发现问题了再修改, 总体框架是已经完成了