React语言包按需加载

直接异步加载语言包不可行的原因在于，有些模块（比如路由）一上来就需要语言包，异步加载赶不上用。

如国等语言包加载完之前让其它代码等待，则白屏时间太长。

方案：在HTML中判断本地语言，并加载语言包，使其与业务JS同步加载，需要注意的点：

1. 语言包与业务代码尽量不要直接相互调用，做好解耦
2. 语言包们分别做为入口（项目多入口）
3. HtmlWebpackPlugin不使用自动注入，以实现语言包按需加载

// zh.js
// 语言文案挂在到 window 上
window.langMsgs = messages;

// en.js
window.langMsgs = messages;

// initI18n
let _currMessages = window.langMsgs || {};
if (process.env.NODE_ENV !== 'production') {  // DEV 不使用分包，方便调试
  switch (_currLang) {
    case 'zh-CN':
      _currMessages = require('./zh').default;
      break;
    case 'en-US':
      _currMessages = require('./en').default;
      break;
    case 'ko':
      _currMessages = require('./ja').default;
      break;
    case 'ja':
      _currMessages = require('./ko').default;
      break;
  }
}

// webpack config
entry: {
  main: path.resolve(__dirname, 'src/index.tsx'),
  zh: path.resolve(__dirname, 'locales/zh.ts'),
  en: path.resolve(__dirname, 'locales/en.ts'),
  ja: path.resolve(__dirname, 'locales/ja.ts'),
  ko: path.resolve(__dirname, 'locales/ko.ts'),
}
plugins: [
  HtmlWebpackPlugin: {
    options: {
        inject: false,  // 取消自动注入

  
    ...
    // 注入CSS
    <% if(process.env.NODE_ENV === "production") { %> 
      <%= htmlWebpackPlugin.tags.headTags %> 
    <%}%>
  
  
    ...
    
    <% if(process.env.NODE_ENV === "production") { %> 
    // 注入JS
    <%= htmlWebpackPlugin.tags.bodyTags.filter((tag) => !tag.attributes)
    .join('') %>
      
    // 注入 入口
    
    <%}%>