tsparticles ：构建反应后粒子运动中断（运动缺陷或有口吃和滞后）

Question

当我使用 npm run start 时，在开发模式下一切正常，但在构建后的生产和部署模式下 (npm run build) 粒子运动中断或速度很慢。

我更改并测试了所有 tsparticles 选项，但它仍然无法正常工作。

我的 React 版本是 17.0.2，typescript 4.5.4 和 tsParticles 1.38.0

import Particles from "react-tsparticles";
export const Header = (props:any) => {

return (
<div>
<Particles
      id="tsparticles"
      options={ 
        {
          "background": {
            "color": {
              "value": "#00000095"
            },
            "position": "50% 50%",
            "repeat": "no-repeat",
            "size": "cover",
            "opacity": 1,
            "image": "url('/img/bg1.jpg')"
          },

         "backgroundMask": {
           "composite": "destination-out",
           "cover": {
             "color": {
               "value": {
                 "r": 255,
                 "g": 255,
                 "b": 255
               }
             },
             "opacity": 1
           },
           "enable": true
         },

         "fullScreen": {
           "enable": false,
           "zIndex": -10
         },
         "interactivity": {
           "events": {
             "onClick": {
               "enable": true,
               "mode": "push"
             },
             "onHover": {
               "enable": true,
               "mode": "bubble",
               "parallax": {
                 "force": 60
               }
             }
           }
         },
         "particles": {
           "color": {
             "value": "#ffffff"
           },
           "move": {
             "attract": {
               "rotate": {
                 "x": 600,
                 "y": 1200
               }
             },
             "enable": true,
             "outModes": {
               "bottom": "out",
               "left": "out",
               "right": "out",
               "top": "out",
               "default": "none"
             },
             "direction": "right",
             "speed": 2
           },
           "number": {
             "density": {
               "enable": true,
             },
             "value": 60
           },
           "opacity": {
             "value": {
               "min": 0.1,
               "max": 0.5
             },
             "animation": {
               "enable": true,
               "speed": 1,
               "minimumValue": 0.1
             }
           },
           "shape": {
             "options": {
               "polygon": {
                 "sides": 5
               },
               "star": {
                 "sides": 5
               }
             },
             "type": "square"
           },

           "size": {
             "random": {
               "enable": true,
               "minimumValue": 0,
             },
             "value": {
               "min": 5,
               "max": 20
             },
             "animation": {
               "speed": 10,
               "minimumValue": 0.1
             }
           }
         }
       }
     }

   }
  />
  </div>
  )
  }

我也将 retina_detect 和 detectRetina 的值更改为 false 但没有解决。

Answer 1

我找到了这个问题的原因，构建工具或捆绑文件在使用npm run build命令时出现问题。

现在我正在用 Webpack 构建项目，没有中断但没有完全修复。

也可以通过更改package.json

中的browserslist来解决

有关此问题的更多详细信息，请参阅以下内容： https://github.com/matteobruni/tsparticles/issues/2809

tsparticles ：构建反应后粒子运动中断（运动缺陷或有口吃和滞后）

tsparticles : Interruption in particle motion (defect in movement or has stutter and lag) after build in react

particles

npm

typescript

reactjs