今天升级了脚手架,重新配置懒加载使用 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 这个配置才能在修改被代码切割的文件时能热更新。
原文地址:https://www.cnblogs.com/3body/p/12630643.html
时间: 2024-10-02 11:47:35