前言
开发时碰到一个页面要引入很多组件的情况，引入过多组件页面渲染自然会有性能问题，因此想到了动态按需加载组件，具体如下：
优化前
// 文件头过多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无法编译，因此打包到线上会翻车！
- import不能用在组件内，会报错
Module build failed: SyntaxError: 'import' and 'export' may only appear at the top level
