Question

我使用汇总创建了反应组件库。

我使用了 Styled-Component 5.1.0 ，并使用安装在同一库中的故事书测试了组件。

我的组件在故事书上很快，但是如果我编译lib并将其安装在react应用上，则同一组件会变得非常慢。

我检查了react dev工具及其分析器的状况，发现它取决于组件内部的styles.div。

我使用了ThemeProvider和Global Style。

我还尝试删除了ThemeProvider和GlobalStyle，但未做任何更改。

我也遵循样式组件官方指南的建议。例如，我遵循建议避免在render方法中使用Style定义。

我不明白这些性能问题的原因。我认为汇总的构建阶段可能会引入一些问题或其他内容。

有人可以帮助我吗？ :) 非常感谢。

这是我的汇总配置

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安装和使用组件

时发生的情况

汇总的样式化组件性能问题

0 个答案: