React.lazy 和 react-hot-loader 遇到的两个坑

Posted 2020-11-27 这个男人来自三体

今天升级了脚手架，重新配置懒加载使用 React.lazy，但是在配置的时候遇到两个坑，搞了很久才解决，在此记录一下。

一是在使用 React.lazy 来进行懒加载的时候，lazy() 里的 import() 组件始终不会进行代码分割，试了各种方法都没解决，而且代码看起来和各种教程都一样的，最后发现是一个 babel 的配置问题。。。

我的 babel 配置之前配置成了这样：

        [‘@babel/preset-env‘, {
            targets: [
                ‘last 2 version‘,
                ‘ie >= 9‘
            ],
            modules: ‘commonjs‘
        }],
        ‘@babel/preset-react‘

结果就是 modules: ‘commonjs‘ 这个配置导致的问题，删除此配置就解决了。。。import() 不能使用 commonjs。

lazy 分割代码的问题解决了，但是发现 react-hot-loader 里面，懒加载的组件修改后不能热更新，不是懒加载的就没问题。。。经过各种搜索后发现也是一个配置问题。。。

import { hot } from ‘react-hot-loader/root‘;
import { setConfig } from ‘react-hot-loader‘;

const Root = () => {......}

setConfig({
    trackTailUpdates: false,  // 添加这个配置才能热更新 lazy 组件
    logLevel: ‘debug‘,
    hotHooks: true,
});

export default hot(Root);

需要使用 trackTailUpdates: false 这个配置才能在修改被代码切割的文件时能热更新。