时间戳

首页 > 解决方案 > Gatsby 何时在客户端 js 包中包含第三方库？

javascript - Gatsby 何时在客户端 js 包中包含第三方库？

问题描述

在 Gatsby 中，我使用 commonmarkjs 从我的 CMS 中解析 markdown 内容并将其呈现为 HTML。这是代码：

import React, { ReactNode, Component } from 'react'
import { HtmlRenderer, Parser } from 'commonmark' // <- I import some commonmarkjs classes...

interface Props {
  markdown: string
}

export default class Text extends Component<Props> {
  parsedMarkdown: string

  constructor(props: Props) {
    super(props)
    const parser = new Parser()
    const renderer = new HtmlRenderer()
    this.parsedMarkdown = renderer.render(parser.parse(props.markdown)) // <- ...and use them here
  }

  render(): ReactNode {
    return (
      <div className="text">
        <div dangerouslySetInnerHTML={{ __html: this.parsedMarkdown }} />
      </div>
    )
  }
}

我运行构建任务，然后使用source-map-explorer分析输出。结果如下：

在此处输入图像描述

您可以看到 commonmark 包含在我的捆绑包中。为什么？我认为 Gatsby 会足够聪明，只使用 lib 来构建实际的模板，而不是将它包含在我的包中。

标签： javascriptreactjswebpackbundlegatsby

解决方案

由于 React 在客户端对组件进行了水合，因此任何需要执行此操作的代码都将默认包含在 Webpack 包中。如果您想减少一些脂肪，您可以调整 Webpack 配置以替换或省略某些库，但请注意来自 GraphQL 查询的响应导出为page-data.json（更多信息）并且您需要将其转换为下游的库（即在组件内部）客户端。

如果您想将 Markdown 转换为 HTML，然后dangerouslySetInnerHTML在组件代码中不包含 Markdown 解析器的情况下使用，您可以使用createResolvers它在 GraphQL 层中执行此转换，使准备好的字符串在您中可用，page-data.json并且无需库客户端-边。

这就是说，我发现使用像markdown-to-jsx（缩小 5kb）这样的轻量级 JSX 感知 Markdown 解析器是一种更可取的方法，它允许更大的灵活性和安全性客户端（不使用dangerouslySetInnerHTML）。

推荐阅读