проблема производительности стиля компонента с накопительным пакетом - PullRequest
Новая
       108

проблема производительности стиля компонента с накопительным пакетом

0 голосов
/ 02 мая 2020

Я создал библиотеку компонентов реагирования с Скопление .

Я использовал Styled-Component 5.1.0 и протестировал компоненты с сборник рассказов, установленный в той же самой библиотеке.

Мой компонент был быстрым на сборнике рассказов , но если я скомпилирую lib и установлю его в приложении реагирования, тот же компонент станет очень-очень медленным.

Я проверил, что происходит с инструментами реагирования и его профилировщиком, и выяснил, что это зависит от styles.div внутри моего компонента.

Я использовал ThemeProvider и Global Style.

Я также пытался удалить ThemeProvider и GlobalStyle, но ничего не изменилось.

Я также следовал советам официального руководства по стилевым компонентам. Например, я последовал предложению избегать определения стиля внутри метода рендеринга.

Я не понимаю причину этих проблем с производительностью. Я думаю, что фаза сборки Rollup, может быть, представляет какую-то проблему или что-то еще.

Кто-то может мне помочь? :) Большое спасибо.

Это мой Rollup Config 

import typescript from "rollup-plugin-typescript2";
import postcss from 'rollup-plugin-postcss'
import commonjs from "rollup-plugin-commonjs";
import external from "rollup-plugin-peer-deps-external";
import resolve from "@rollup/plugin-node-resolve";
import json from "@rollup/plugin-json";
import generatePackageJson from "rollup-plugin-generate-package-json";
import pkg from "./package.json";
import babel from 'rollup-plugin-babel';
import url from 'rollup-plugin-url';

export default {
  input: "src/index.tsx",
  external: [
    'react',
    'react-dom',
    'styled-components'
  ],
  output: [
    {
      file: pkg.main,
      format: "cjs",
      exports: "named",
      sourcemap: true
    },
    {
      file: pkg.module,
      format: "es",
      exports: "named",
      sourcemap: true
    }
  ],
  plugins: [
    resolve({
      browser: true,
      preferBuiltins: true
    }),
    generatePackageJson({
      baseContents: pkg => ({
        name: pkg.name,
        version: pkg.version,
        description: pkg.description,
        author: pkg.author,
        license: pkg.license,
        main: pkg.main,
        module: pkg.module,
        private: false,
        dependencies: pkg.dependencies,
        peerDependencies: {
          "react": "^16.13.0",
          "react-dom": "^16.13.0",
          antd: "^3.26.0",
          "immutability-helper": "^3.0.1"
        }
      })
    }),
    url({
      include: ['src/styles/webfonts/*'],
      limit: Infinity,
      emitFiles: true, 
    }),
    json(),
    external(),    
    typescript({
      rollupCommonJSResolveHack: true,
      exclude: ["**/__tests__/**"],
      clean: true
    }),
    commonjs({
      include: ["node_modules/**"],
      exclude: ["**/*.stories.*", "**/*.test.*"],
      namedExports: {
        "node_modules/react/react.js": [
          "Children",
          "Component",
          "PropTypes",
          "createElement"
        ],
        "node_modules/react-dom/index.js": ["render"]
      }
    }),
    babel({
      exclude: "node_modules/**",
      presets: ["@babel/env", "@babel/preset-react"]
    }),
    postcss({
      extensions: ['.css', '.less', '.sass'],
      use : [
        ['less', { javascriptEnabled: true }]
      ],
    })
  ],
  // It's important to exclude these external libraries
  external: id =>
    /^react|react-dom|axios|antd|react-redux|redux-thunk/.test(id)
};

И это то, что произошло, когда я установил и использовал свой Компонент из lib

performance issue

...