小编Fab*_*ler的帖子

Next.js 包大小因动态组件查找而爆炸,如何解决?

域名:

检查repo - common.js 包含所有依赖项,即使在相应页面上只使用了一个。

  • http://localhost:3000/components/ComponentOne
  • http://localhost:3000/components/ComponentTwo

现场演示:点击这里

更多细节:

我有一个应用程序(找到一个非常简化的版本),其中根据用户输入呈现不同的组件。通过组件映射找到要渲染的组件。common.js 包含切换器页面的所有依赖项是有道理的,其中两个组件都必须可访问(以及它们的依赖项)。但是单个页面包含各自的其他依赖项是没有意义的。

总结一下:

  • 我希望能够拥有大量组件,这些组件可以根据用户的输入进行呈现。我的用例对它们进行序列化和反序列化(如此处所示)是不可行的,因为组件非常不同并且需要不同的依赖项
  • 我还想将每个组件呈现到它自己的静态生成页面,在那里我从数据库中检索其他 SEO 信息。但是,在这种情况下,我只想为手头的特定组件加载所需的依赖项。

http://localhost:3000

在此处输入图片说明

Selecting ComponentOne results in:

使用 recharts.js 在此处输入图片说明

Selecting ComponentTwo results in:

使用victory.js 在此处输入图片说明

javascript reactjs webpack next.js

16
推荐指数
1
解决办法
1082
查看次数

不变违规:React.Children.only预计会收到一个React元素子

我不断得到不变的违规行为,我真的不知道为什么......它肯定与OverlayTriggers有关.当他们离开时一切正常.

进口:

import Col from 'react-bootstrap/lib/Col';
import Row from 'react-bootstrap/lib/Row';
import Tooltip from 'react-bootstrap/lib/Tooltip';
import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
Run Code Online (Sandbox Code Playgroud)

应该使用Key/Value对呈现列表项,其中Value有一个工具提示:

const renderCustomField = (field,customFields) => {
    const tooltip = (<Tooltip id="tooltip">{customFields[field]['sub']}</Tooltip>)
    return (
        <li>
            <OverlayTrigger placement="top" overlay={tooltip}>
                {field}
            </OverlayTrigger>
        </li>
    )
}
Run Code Online (Sandbox Code Playgroud)

要呈现customFields的类:

export default class EventHeaderCustomFields extends Component {
    render () {
        const customFieldsNames = Object.keys(this.props.customFields);

        return (
            <Col xs={12}>
                <h4><strong>Short overview:</strong></h4>
                <ul>
                {customFieldsNames.map(
                    (field) => renderCustomField(field,this.props.customFields)
                )}
                </ul>
            </Col>
        )
    }
}

EventHeaderCustomFields.propTypes = {
    eventData:PropTypes.object
};
Run Code Online (Sandbox Code Playgroud)

reactjs react-bootstrap

14
推荐指数
1
解决办法
1万
查看次数

SVG Marker在不同屏幕上的呈现方式不同

更新:

我想出了屏幕问题.设备像素比是罪魁祸首.在具有较低window.devicePixelRatio的设备上,图标显示较小,解决方案是使图标的大小以window.devicePixelRatio为条件,即:

scaledSize: highDevicePixelRatio ? new google.maps.Size(40, 60) : new google.maps.Size(60, 90)
Run Code Online (Sandbox Code Playgroud)

决议也可能发挥作用,但我现在无法测试.

但Internet Explorer 11的问题仍然存在.

**结束更新**

所以这真的很荒谬,我仍然有点困惑.我注意到我的自定义标记的这种极不一致的行为.开车送我疯了,因为我无法弄清楚为什么他们会表现得与众不同.我刚才意识到这取决于我正在显示地图/标记的屏幕.我正在使用https://github.com/tomchentw/react-google-maps.

我正在使用MacBookPro 2015和LG 34UC98-W通过HDMI线连接.

但不仅屏幕,使用的浏览器也会产生不同的结果.它在chrome(屏幕上的差异)上工作得很好,IE 11中根本没有显示标记(没有测试过FireFox).

现在这是我当前实例化我的标记的方式:

const marker = {
                    position: new google.maps.LatLng(this.state.center.lat,this.state.center.lng),
                    icon: {
                            url: icon_url(this.props.markerIcon,'purple'),
                            anchor: new google.maps.Point(13,42),
                            scaledSize: new google.maps.Size(40, 60)    
                          },
                    draggable: false,
                }
Run Code Online (Sandbox Code Playgroud)

在我的MacBook上,我得到以下结果: 在此输入图像描述 在我的LG上,我得到以下结果: 在此输入图像描述

这让我感动NUTS,有没有办法在屏幕/浏览器之间实现一致的行为?这是什么原因???

遵循SVG代码:

我在第一个svg标记中尝试使用和不使用显式宽度和高度属性.没有区别.

<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-maps-api-3 reactjs

11
推荐指数
1
解决办法
364
查看次数

Vercel/Next.js (seeminlgy) 随机返回 404 和 {"notFound": True}

介绍

很抱歉无法提供可重现的示例。我们的团队无法可靠地重现该错误。我们已经调查该错误近一周了,但似乎没有取得任何进展。我们刚刚推出了next.js基于无头的 Shopify 商店(即使用 next.js 作为前端,使用 Shopify 处理从结帐开始的所有内容)。

这个错误是迄今为止我所见过的最奇怪的事情next.js,任何解决该问题的指示都值得赞赏。

笔记:

您可以导航到www.everdrop.ch/it并打开控制台以查看一些损坏的链接。然而,由于这是生产,我们显然会尽力尽快修复它们。

问题:

几乎每次我们部署新版本时,我们都会在控制台中看到一些看似随机的 404,因为下次尝试预取 Links时。

404 的形式始终为https://domain/_next/data/<DEPLOYMENT>/<PATH>/slug.json有时PATH为eg category-pages,有时为空。

观察1

当单击控制台中的损坏链接之一时(.json,我会得到一个404

导航到客户端的损坏页面也会给出 404

然而,当curl -I -L我得到一个200

观察2

检查 Vercel 中的输出数据时
一切都像魅力一样

请注意,URL 不同。这是相同的部署,但 URL 不同。

观察3

受影响的链接似乎是随机的。然而,有些人似乎比其他人更容易受到影响。

观察4

导航到该页面然后刷新或直接访问该页面确实会生成正确呈现的页面。令人惊讶的是,这也导致(对于大多数页面而言)初始错误消失。

观察5

在 vercel 上重新运行部署通常可以解决问题,并且许多损坏的链接将随机工作。有时这会导致其他损坏的链接。

背景和堆栈

我们使用StoryblokShopify作为数据提供者在构建期间进行查询。Shopify 用于产品数据,Storyblok 用于页面和内容数据。到目前为止,所有受影响的页面都是我们在构建期间从 Storyblok 提取数据的页面(这些页面是除搜索和产品页面之外的所有页面)。

我们用于next i18next多语言本地化。我们使用ENV变量来控制数据的来源来构建不同的商店。

reactjs webpack next.js vercel

9
推荐指数
1
解决办法
1469
查看次数

Vercel next.js 部署功能日志,无需第三方

一直在尝试使用 Vercel 进行部署,并且非常喜欢它的简单性。也许我在这里没有看到任何东西,但是如何在不通过管道传输到第三方的情况下获得函数的可见性?

我有这个pages/api/hello.js-api

export default (req, res) => {
    console.log("yolo");
    res.statusCode = 200;
    res.json({ name: "John Doe" });
};
Run Code Online (Sandbox Code Playgroud)

然后我可以在仪表板中看到以下结果。但是我在哪里或如何才能看到yolo并且我在这里丢失了一些东西?有其他正确调试方法吗?

在此输入图像描述

node.js next.js serverless vercel

8
推荐指数
1
解决办法
3537
查看次数

是否可以为线程池设置maxtasksperchild?

在长时间运行的多线程脚本中遇到一些可能的内存泄漏后,我发现了有关的信息maxtasksperchild,可以在多进程池中使用它,如下所示:

import multiprocessing

with multiprocessing.Pool(processes=32, maxtasksperchild=x) as pool:
    pool.imap(function,stuff)
Run Code Online (Sandbox Code Playgroud)

线程池(multiprocessing.pool.ThreadPool)是否有类似的可能?

python multithreading multiprocessing

7
推荐指数
1
解决办法
143
查看次数

Seaborn Jointplot 更改 Figsize

我正在使用 Jupyter Notebook 并想要一个全宽的联合图。

我似乎无法让它工作。

g = sns.jointplot(x="pos", y="diff", data=plot_data)
plt.figure(figsize=(16, 6))
Run Code Online (Sandbox Code Playgroud)

根本不会改变大小。

fig, ax = plt.subplots(figsize=(16, 6))
g = sns.jointplot(ax=ax, x="pos", y="diff", data=plot_data)
Run Code Online (Sandbox Code Playgroud)

抛出错误。

python matplotlib seaborn

6
推荐指数
1
解决办法
5144
查看次数

BigQuery“薛定谔行”或为什么 ROW_NUMBER() 不是一个好的标识符

情况

\n

我们有一个相当复杂的内部逻辑来将营销支出分配到各个渠道,并且目前已开始重新设计一些查询以简化设置。我们最近遇到了一个非常令人费解的案例,其中使用ROW_NUMBER() OVER()识别唯一行会导致非常奇怪的结果。

\n

问题

\n

本质上,使用ROW_NUMBER() OVER()导致了我所说的 Schr\xc3\xb6dingers 行。因为它们似乎同时匹配和不匹配(请在下面找到可复制的查询)。在所附的屏幕截图(这是查询的结果)中可以清楚地看到

\n

german_spend + non_german_spend > total_spend

\n

事实不应该是这样。

\n

在此输入图像描述

\n

询问

\n

请注意,每次运行查询时都会给出不同的结果,因为它依赖 RAND() 来生成虚拟数据。另请注意,该查询是我们正在做的事情的一个非常简单的版本。由于超出本文范围的原因,我们需要唯一地标识存储桶。

\n
###################\n# CREATE Dummy Data\n###################\nDECLARE NUMBER_OF_DUMMY_RECORDS DEFAULT 1000000;\n\nWITH data AS (\n  SELECT\n    num as campaign_id, \n    RAND() as rand_1,\n    RAND() as rand_2\n  FROM\n    UNNEST(GENERATE_ARRAY(1, NUMBER_OF_DUMMY_RECORDS)) AS num\n),\n\nspend_with_categories AS (\n  SELECT\n    campaign_id,\n    CASE \n      WHEN rand_1 < 0.25 THEN \'DE\'\n      WHEN rand_1 < 0.5 THEN \'AT\'\n      WHEN rand_1 < 0.75 THEN …
Run Code Online (Sandbox Code Playgroud)

google-bigquery

6
推荐指数
1
解决办法
100
查看次数

React-Google-Maps:标记在缩放后调整大小

我在我的React项目中使用"react-google-maps" https://github.com/tomchentw/react-google-maps.

为了说明我的问题,请在下面找到两张图片.第一个显示加载后地图的外观,第二个显示缩放后的外观.

如何加载地图并设置标记

缩放后如何看待它

显然这不是我想要的.

但是,我不知道造成这种情况的原因.使用size而不是scaledSize时,可以观察到相同的效果(即切断图标).这是我实例化我的地图和标记的方式:

const MapInit = withGoogleMap(props => (
    <GoogleMap
        ref={props.onMapLoad}
        defaultZoom={13}
        defaultCenter={{ lat: 48.150884140293215, lng: 11.593923568725586 }}
    >
        <Marker
            {...props.marker}
        />
    </GoogleMap>
));
Run Code Online (Sandbox Code Playgroud)

这是我的渲染方法.

render () {
    const loc = this.props.eventLocation

    const marker = {
                    // position: new google.maps.LatLng(loc.latitude,loc.longitude),
                    position: new google.maps.LatLng(loc.latitude,loc.longitude),
                    icon: {
                            url: icon_url(this.props.markerIcon,'purple'),
                            scaledSize: new google.maps.Size(40, 64),
                            origin: new google.maps.Point(0,0)
                          }
                    }

    return (
        <Row>
            <Col xs={12}>
                <div className='map__aspect-ratio'>
                    <div className='map__content'>
                        <MapInit
                            containerElement={
                                <div style={{ 'height': `100%` }} />
                            }
                            mapElement={
                                <div style={{ …
Run Code Online (Sandbox Code Playgroud)

javascript google-maps google-maps-api-3 reactjs

5
推荐指数
1
解决办法
898
查看次数

Vercel 旧预览部署

我真的很喜欢在 Vercel 上部署应用程序。然而,我确实想知道应该如何处理不可避免地会创建的所有预览部署。

你应该自己删除它们吗?有没有办法在一段时间后自动删除预览部署?

vercel

5
推荐指数
1
解决办法
3248
查看次数