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

今天升级了脚手架,重新配置懒加载使用 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 这个配置才能在修改被代码切割的文件时能热更新。