refactor: remove whyDidYouRender and lazyload html2canvas

src/components/ColorTitle/Poetry.js

@@ -37,7 +37,7 @@ const Poetry = ({
   content = '',
   author = '',
   title = '',
-  refetch
+  refetch,
 }) => {
   const { isMobile } = useMobile();
   const handleClick = () => {
@@ -49,7 +49,7 @@ const Poetry = ({
       style={{ background: bgColor, color: fontColor }}
       className={isMobile ? 'mobile' : ''}
     >
-      {content.map(line => {
+      {content.map((line) => {
         return (
           <p key={line} className="line">
             {line}
@@ -62,9 +62,5 @@ const Poetry = ({
     </Wrapper>
   );
 };
-Poetry.whyDidYouRender = {
-  logOnDifferentValues: true,
-  customName: 'Poetry'
-};
 
 export default Poetry;

src/components/ColorTitle/index.js

@@ -94,8 +94,4 @@ const ColorTitle = ({ name, pinyin, hex, RGB, CMYK, figure }) => {
     </Wrapper>
   );
 };
-ColorTitle.whyDidYouRender = {
-  logOnDifferentValues: true,
-  customName: 'ColorTitleComp'
-};
 export default ColorTitle;

src/index.js

@@ -5,10 +5,6 @@ import GlobalStyle from './Global.style';
 
 import register from './registerServiceWorker';
 
-if (process.env.NODE_ENV !== 'production') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render');
-  whyDidYouRender(React);
-}
 ReactDOM.render(
   <>
     <GlobalStyle />

src/pages/index.js

@@ -11,7 +11,7 @@ const Header = lazy(() => import('../components/Header'));
 const IconScreenshot = lazy(() => import('../components/IconScreenshot'));
 const ColorSet = lazy(() => import('../components/ColorSet'));
 const ICP = lazy(() => import('../components/ICP'));
-import Preview from '../components/Preview';
+const Preview = lazy(() => import('../components/Preview'));
 import InfoModal from '../components/InfoModal';
 
 import { useModal, useColor, usePreview } from '../hooks';
@@ -108,8 +108,4 @@ const Index = () => {
     </Suspense>
   );
 };
-Index.whyDidYouRender = {
-  logOnDifferentValues: true,
-  customName: 'IndexPage'
-};
 export default Index;