要想让TS正确的代码提示,直接使用createContainer(useToggle);是无法保证代码正确提示的。因此需要传递数据类型参数,告诉TypeScript正确的提示代码。

const Toggler = createContainer<[boolean, Actions], boolean>(useToggle);

这时候再使用,就会有正确的代码提示了。

const [state, { setLeft }] = Toggler.useContainer();

The development server will only attempt to send requests without text/html in its Accept header to the proxy.

官方文档

devServer只会代理Header中Accept不是text/html的请求。

使用source-map-explorer工具,检查各个组件包的占用情况。

npm install --save source-map-explorer

修改package.json的script命令。

"scripts": {
+    "analyze": "source-map-explorer 'build/static/js/*.js'",
     "build": "react-scripts build"
}

打包,然后分析即可。

npm run build
npm run analyze

缩短首屏渲染的方案有服务端渲染以及预渲染。服务端渲染的缺点是,每次切换路由都要在服务端重新生成,这样会导致第一个字节到达的时间增长。

预渲染的方案是在打包时,就是用无头浏览器,将路由页面生成为静态的HTML文件,来缩短请求时间。

一般来说,我们使用extends来实现,但是如果需要重写原来的类型,可以直接这样写。

interface User {
  name: string;
  age: number;
  gender: number;
}

type Student = {
  [key in keyof User]: string;
}

interface User {
  name: string;
  age: number;
  gender: number;
}
// 一般用于函数修改类型的值
type userKeys = keyof User;
type keys = "name" | "age" | "gender";

type User = {
  [key in keys]: string;
}

/**
 * 控制一个函数延后执行
 * @param tick 休眠时间
 */
function timeout(tick: number){
    return (target: any, propertyKey: string, descriptor: PropertyDescriptor) => {
        let method = descriptor.value;
        descriptor.value = (...args: any[]) =>{
            setTimeout(()=>{
                method.apply(target, args)
            }, tick);
        }
    }
}

exec可以使用-it 分配伪终端,退出不会导致整个容器退出,attach中exit,会导致容器的停止。

exec进入命令:

docker exec -it 9df70f9a0714 /bin/bash

React官方文档中提到了基于路由的代码分割的方案,方法如下: 这样打包出来的chunk的名字是ID格式,检查起来不是很方便。 基于webpack提供的Magic Comments方案,我们可以实现修…

关注我们的公众号

微信公众号