Оптимизация импорта ответной реакции в проекте Next. js - PullRequest
0 голосов
/ 11 февраля 2020

Мне интересно, как лучше импортировать реагирующие bootstrap компоненты на моих страницах (следующий проект js)?

import Container from 'react-bootstrap/Container'
import Navbar from 'react-bootstrap/Navbar'
import Col from 'react-bootstrap/Col'
import Button from 'react-bootstrap/Button'

Или:

import { Container, Navbar, Col, Button } from 'react-bootstrap'

Первый пример более оптимизирован, чем второй? то же самое?

Для вашей информации, вот мой Компонент Layout (где я добавляю ссылки на bootstrap css):

import { useMobxStores } from '../stores'
import { observer } from 'mobx-react'
import Head from 'next/head'
import Header from './Header'
import Footer from './Footer'
import Container from 'react-bootstrap/Container'
import bootstrapStyle from 'bootstrap/dist/css/bootstrap.css'
import stylesheet from '../styles/index.scss'

const Layout = (props) => {
    const {
        uiStore: { pageClassName },
    } = useMobxStores()

    return (
        <Container fluid={true}>
            <Head>
                <meta charSet='utf-8' />
                <meta key="viewport" name="viewport" content="initial-scale=1.0, width=device-width" />
                <style dangerouslySetInnerHTML={{ __html: bootstrapStyle }} />
                <style dangerouslySetInnerHTML={{ __html: stylesheet }} />
            </Head>
            <Header />
            <Container role="main">
                {props.children}
            </Container>
            <Footer />
        </Container>
    )
}

export default observer(Layout)

Заранее спасибо.

...