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 这个配置才能在修改被代码切割的文件时能热更新。

原文地址:https://www.cnblogs.com/3body/p/12630643.html

时间: 2024-10-02 11:47:35

React.lazy 和 react-hot-loader 遇到的两个坑的相关文章

React中异步模块api React.lazy和React.Suspense

React.lazy React.lazy 这个函数需要动态调用 import().它必须返回一个 Promise,该 Promise 需要 resolve 一个 defalut export 的 React 组件. 然后应在 React.Suspense 组件中渲染 lazy 组件,如此使得我们可以使用在等待加载 lazy 组件时做优雅降级(如 loading 指示器等). 比如: const OtherComponent = React.lazy(() => import('./OtherC

React.lazy和React.Suspense异步加载组件

在React16.6中引入了React.lazy和React.Suspense,这两个组件,可以用来实现异步加载组件. 例如: const johanComponent = React.lazy(() => import(/* webpackChunkName: "johanComponent" */ './myAwesome.component')); export const johanAsyncComponent = props => ( <React.Susp

如何使用React.lazy和Suspense进行组件延迟加载

#JAVASCRIPT 如何使用React.lazy和Suspense进行组件延迟加载 向你的粉丝发推文 通过电子邮件发送给朋友 与你的朋友分享 作者:Boris Sever React 16.6将代码分割带到了一个新的水平.您现在可以在真正需要时加载组件,而无需安装其他库. 什么是代码分裂和延迟加载? Webpack将代码分割定义为: “将代码拆分为各种捆绑的技术,然后可以按需加载或并行加载”.[ 来源 ] 另一种说法是:“按需加载或并行加载 ”是延迟加载.与懒惰加载相反的是急切加载.无论您是

[React] Recompose: Theme React Components Live with Context

SASS Bootstrap allows us to configure theme or branding variables that affect all components (e.g. Primary Color or Link Color). When we isolate our styles inside React components we lose the ability to theme them. To get round this we can put our th

【玩转React】关于React你需要知道的事儿

前言 随着前端技术的迅猛发展,各种前端框架也随势崛起,但归根结底,支撑每一款web框架流行的强大因素都是它能更好地服务于业务. React 自然也不例外,它的开发者当初正在开发Facebook的一个广告系统,由于不满足于当下任何的 MVC 框架,所以就自己写了一套 UI 框架,于是乎大名鼎鼎的 React 就由此诞生了. React 的出现无疑为 web 开发带来了颠覆性的改变,多少开发者夜以继日只为体验一把 React 带来的快感.本文就将带领大家一起领略一番 React 的理念.特色与情怀.

[React] Style a React component with styled-components

In this lesson, we remove the mapping between a React component and the styles applied to it via classnames. We write our styles directly within the component, in a real CSS syntax, with the full power of JavaScript. Old: import React, { Component }

创建React工程:React工程模板

这是本人初学React做的学习笔记;讲的不是很深,只算是简单的进行介绍. 这是一个小系列.都是在同一个模板中搭建的,但是代码是不能正常执行的. >>index.js <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>React工程模板</title> <!-- react.js 是Reac

React Native之React速学教程(下)

概述 本篇为<React Native之React速学教程>的最后一篇.本篇将带着大家一起认识ES6,学习在开发中常用的一些ES6的新特性,以及ES6与ES5的区别,解决大家在学习React /React Native过程中对于ES6与ES5的一些困惑. ES6的特性 何为ES6? ES6全称ECMAScript 6.0,ES6于2015年6月17日发布,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262.

React Native之React速学教程(上)

概述 本篇为<React Native之React速学教程>的第一篇.本篇将从React的特点.如何使用React.JSX语法.组件(Component)以及组件的属性,状态等方面进行讲解. What's React React是一个用于组建用户界面的JavaScript库,让你以更简单的方式来创建交互式用户界面. 当数据改变时,React将高效的更新和渲染需要更新的组件.声明性视图使你的代码更可预测,更容易调试. 构建封装管理自己的状态的组件,然后将它们组装成复杂的用户界面.由于组件逻辑是用