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 這個配置才能在修改被代碼切割的文件時能熱更新。