Когда Gatsby включает стороннюю библиотеку в комплект js на стороне клиента? - PullRequest
Новая
       4

Когда Gatsby включает стороннюю библиотеку в комплект js на стороне клиента?

1 голос
/ 19 января 2020

В Gatsby я использую общий знак js, чтобы проанализировать контент уценки из моей CMS и отобразить его как 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 . Вот результат:

enter image description here

Вы можете видеть, что общий знак включен в мой комплект. Почему? Я думал, что Гэтсби будет достаточно умен, чтобы использовать библиотеку только для создания фактического шаблона, а не для включения его в свой комплект.

1 Ответ

3 голосов
/ 19 января 2020

Поскольку React увлажняет ваши компоненты на стороне клиента, любой код, необходимый для этого, будет включен по умолчанию в ваш пакет Webpack. Если вы хотите обрезать жир, вы можете настроить конфигурацию Webpack, чтобы заменить или опустить определенные библиотеки , но имейте в виду, что ответ на запрос GraphQL экспортируется как page-data.json ( больше info ) и вам понадобятся библиотеки, которые преобразуют его на стороне клиента (т.е. внутри компонента).

Если вы хотите преобразовать ваш Markdown в HTML, а затем использовать dangerouslySetInnerHTML без включения анализатора Markdown в код вашего компонента, вы можете использовать createResolvers для выполнения этого преобразования внутри слоя GraphQL, делая подготовленную строку доступной в вашем page-data.json и устраняя необходимость в клиентской части библиотеки.

При этом я нахожу использование легкого анализатора Markdown с поддержкой JSX, такого как markdown -to-jsx (минимизированный 5 КБ) для предпочтительного подхода, обеспечивающего большую гибкость и безопасность на стороне клиента (без использования dangerouslySetInnerHTML).

...