import和require动态导入组件

前言

开发时碰到一个页面要引入很多组件的情况，引入过多组件页面渲染自然会有性能问题，因此想到了动态按需加载组件，具体如下：

优化前
// 文件头过多import会有性能问题

image.png

...

优化后

 /**
   * 动态导入需要加载组件
   * @param _fieldName 维护的文件名和enums枚举中的value值对应
   */
  const renderFieldComponents = (_fieldName) => {
    /* eslint-disable */
    const DynamicRow = require(`../FieldComponents/${_fieldName}/index`);
    const Component = DynamicRow.default || DynamicRow;
    return <Component {...storeData} />;
  };

核心原理和注意事项

1.webpack打包时会去固定目录下找到文件的唯一hask打包成chunk文件，hask和chunk有个映射关系，因此能加载到固定目录下的文件，所这种写法import(../固定文件/${变量}/index.tsx)编译后没问题。
2.import(变量)这种写法因为无固定目录，webpack无法编译，因此打包到线上会翻车！

3. import不能用在组件内，会报错

Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level