build(reduice-size): globally (#1130)

* chore: add local svg icons

* chore: use local svgs

* build(size): reduce size by rm i18n && dynamic load

* build(size): reduce size by rm i18n && dynamic load

* build(size): reduce size by rm i18n && dynamic load

* chore: reduce build size wip

* chore: reduce build size wip

* build(size): reduce size wip

* chore: remove un-used container

* chore: test dynamic waypoint tracker

* chore: move waypoint load to client

* build(size): fix crash

* build(size): remove unused part

* build(size): drop sentry support

* chore: trigger ci

Author: mydearxym

.eslintrc.js

@@ -32,6 +32,7 @@ module.exports = {
           '@/schemas': 'src/schemas',
           '@/Img': 'src/components/Img',
           '@/SvgIcons': 'src/components/SvgIcons',
+          '@/icons': 'src/components/Icons',
           '@/i18n': 'i18n',
           '@/spec': 'src/spec',
         },
@@ -40,6 +41,7 @@ module.exports = {
     },
   },
   rules: {
+    '@typescript-eslint/no-var-requires': 0,
     '@typescript-eslint/ban-ts-comment': 0,
     'react/jsx-uses-react': 'off',
     'react/react-in-jsx-scope': 'off',

jsconfig.json

@@ -16,6 +16,7 @@
       "@/schemas": ["src/schemas"],
       "@/Img": ["src/components/Img"],
       "@/SvgIcons/*": ["src/components/SvgIcons/*"],
+      "@/icons/*": ["src/components/icons/*"],
       "@/i18n": ["i18n"]
     }
   },

next.config.docker.js

@@ -24,9 +24,6 @@ const nextConfig = {
         'process.env.SENTRY_RELEASE': JSON.stringify(buildId),
       }),
     )
-    if (!isServer) {
-      config.resolve.alias['@sentry/node'] = '@sentry/browser'
-    }
 
     return config
   },

next.config.js

@@ -10,17 +10,17 @@ const withBundleAnalyzer = require('@next/bundle-analyzer')({
 const offlineConfig = require('./config/next_offline')
 
 // Use the SentryWebpack plugin to upload the source maps during build step
-const SentryWebpackPlugin = require('@sentry/webpack-plugin')
+// const SentryWebpackPlugin = require('@sentry/webpack-plugin')
 
-const {
-  NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
-  SENTRY_ORG,
-  SENTRY_PROJECT,
-  SENTRY_AUTH_TOKEN,
-  NODE_ENV,
-} = process.env
+// const {
+//   NEXT_PUBLIC_SENTRY_DSN: SENTRY_DSN,
+//   SENTRY_ORG,
+//   SENTRY_PROJECT,
+//   SENTRY_AUTH_TOKEN,
+//   NODE_ENV,
+// } = process.env
 
-process.env.SENTRY_DSN = SENTRY_DSN
+// process.env.SENTRY_DSN = SENTRY_DSN
 
 // next-plugins end
 
@@ -34,38 +34,6 @@ const nextConfig = {
       new webpack.ContextReplacementPlugin(/moment[/\\]locale$/, /(en)/),
     )
 
-    // for sentry
-    config.plugins.push(
-      new webpack.DefinePlugin({
-        'process.env.SENTRY_RELEASE': JSON.stringify(buildId),
-      }),
-    )
-    if (!isServer) {
-      config.resolve.alias['@sentry/node'] = '@sentry/browser'
-    }
-
-    // When all the Sentry configuration env variables are available/configured
-    // The Sentry webpack plugin gets pushed to the webpack plugins to build
-    // and upload the source maps to sentry.
-    // This is an alternative to manually uploading the source maps
-    // Note: This is disabled in development mode.
-    if (
-      SENTRY_DSN &&
-      SENTRY_ORG &&
-      SENTRY_PROJECT &&
-      SENTRY_AUTH_TOKEN &&
-      NODE_ENV === 'production'
-    ) {
-      config.plugins.push(
-        new SentryWebpackPlugin({
-          include: '.next',
-          ignore: ['node_modules'],
-          urlPrefix: '~/_next',
-          release: buildId,
-        }),
-      )
-    }
-
     return config
   },
 }

package.json

@@ -84,7 +84,6 @@
     "graphql-voyager": "^1.0.0-rc.31",
     "js-cookie": "^2.2.0",
     "mastani-codehighlight": "0.0.7",
-    "mobile-device-detect": "^0.4.3",
     "mobx": "6.3.2",
     "mobx-react": "7.2.0",
     "mobx-react-lite": "3.2.0",
@@ -95,7 +94,6 @@
     "next-compose-plugins": "^2.2.0",
     "next-i18next": "4.4.1",
     "next-offline": "4.0.6",
-    "next-seo": "4.4.0",
     "nextjs-progressbar": "^0.0.6",
     "overlayscrollbars": "1.13.1",
     "path-match": "^1.2.4",
@@ -110,6 +108,7 @@
     "react-calendar-heatmap": "1.8.1",
     "react-content-loader": "3.4.2",
     "react-copy-to-clipboard": "^5.0.3",
+    "react-device-detect": "^1.17.0",
     "react-dom": "17.0.2",
     "react-highlight-words": "^0.16.0",
     "react-lazy-load-image-component": "1.5.0",

server/index.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /**
  *
  * this server is only used for next.js SSR
@@ -13,8 +14,8 @@ const mobxReact = require('mobx-react')
 // inspect graphql model
 const { express: voyagerMiddleware } = require('graphql-voyager/middleware')
 // i18n setup
-const nextI18NextMiddleware = require('next-i18next/middleware').default
-const nextI18next = require('../i18n')
+// const nextI18NextMiddleware = require('next-i18next/middleware').default
+// const nextI18next = require('../i18n')
 
 const app = require('./app')
 const { redirectToNakedUrl } = require('./helper')
@@ -44,8 +45,8 @@ mobxReact.enableStaticRendering(true)
     voyagerMiddleware({ endpointUrl: CONFIG.GRAPHQL_ENDPOINT }),
   )
 
-  await nextI18next.initPromise
-  server.use(nextI18NextMiddleware(nextI18next))
+  // await nextI18next.initPromise
+  // server.use(nextI18NextMiddleware(nextI18next))
 
   // eslint-disable-next-line global-require
   server.use('/', require('./routes'))

src/components/ArticleBaseStats/index.tsx

@@ -7,7 +7,6 @@
 import { FC, memo } from 'react'
 
 import type { TArticle, TContainer } from '@/spec'
-import { ICON } from '@/config'
 import { buildLog, scrollToComments } from '@/utils'
 
 import { Space } from '@/components/Common'
@@ -36,11 +35,11 @@ const ArticleBaseStats: FC<TProps> = ({
 }) => {
   return (
     <Wrapper testid={testid}>
-      <ViewsIcon src={`${ICON}/article/viewed.svg`} />
+      <ViewsIcon />
       <Count>{article.views}</Count>
       <Space left={14} />
       <CommentWrapper onClick={() => scrollToComments(container)}>
-        <CommentIcon src={`${ICON}/article/comment.svg`} />
+        <CommentIcon />
         <CommentCount>{article.commentsCount}</CommentCount>
       </CommentWrapper>
     </Wrapper>

src/components/ArticleBaseStats/styles/index.ts

@@ -2,25 +2,29 @@ import styled from 'styled-components'
 
 import type { TTestable } from '@/spec'
 
-import Img from '@/Img'
+import ViewSVGIcon from '@/icons/View'
+import CommentSVGIcon from '@/icons/Comment'
+
 import { css, theme } from '@/utils'
 
 export const Wrapper = styled.div.attrs(({ testid }: TTestable) => ({
   'data-test-id': testid,
 }))<TTestable>`
   ${css.flex('align-center')};
 `
-const Icon = styled(Img)`
+export const ViewsIcon = styled(ViewSVGIcon)`
   fill: ${theme('thread.articleDigest')};
   ${css.size(14)};
   transition: fill 0.25s;
 `
-export const ViewsIcon = styled(Icon)``
-
 export const CommentWrapper = styled.div`
   ${css.flex('align-center')};
 `
-export const CommentIcon = styled(Icon)`
+export const CommentIcon = styled(CommentSVGIcon)`
+  fill: ${theme('thread.articleDigest')};
+  ${css.size(14)};
+  transition: fill 0.25s;
+
   ${CommentWrapper}:hover & {
     cursor: pointer;
     fill: ${theme('thread.articleTitle')};

src/components/ArticlesFilter/DesktopView.tsx

@@ -9,9 +9,9 @@ import dynamic from 'next/dynamic'
 
 import type { TArticleFilter, TResState } from '@/spec'
 
-import { TYPE } from '@/constant'
+import { TYPE, THREAD } from '@/constant'
 import { buildLog } from '@/utils'
-import { useViewing } from '@/hooks'
+// import { useViewing } from '@/hooks'
 
 import FilterButton from './FilterButton'
 import SelectedFilters from './SelectedFilters'
@@ -46,13 +46,14 @@ const ArticlesFilter: FC<TProps> = ({
   totalCount = 0,
   resState = TYPE.RES_STATE.DONE,
 }) => {
-  const { activeThread } = useViewing()
+  // NOTE: 这里使用 useViewing 会导致 build-size blow
+  // const { activeThread } = useViewing()
 
   return (
     <Wrapper>
       <MainFilterWrapper>
         <FilterButton
-          thread={activeThread}
+          thread={THREAD.POST}
           onSelect={onSelect}
           activeFilter={activeFilter}
         />

src/components/ArticlesFilter/FilterButton.tsx

@@ -3,7 +3,6 @@ import dynamic from 'next/dynamic'
 
 import type { TThread, TArticleFilter } from '@/spec'
 import { ICON_CMD } from '@/config'
-import { useAccount } from '@/hooks'
 
 import Tooltip from '@/components/Tooltip'
 
@@ -14,7 +13,7 @@ import {
   FilterIcon,
 } from './styles/filter_button'
 
-const FilterPanel = dynamic(() => import('./FilterPanel/index'), {
+const FilterPanel = dynamic(() => import('./FilterPanel'), {
   /* eslint-disable react/display-name */
   loading: () => <div />,
   ssr: false,
@@ -27,8 +26,6 @@ type TProps = {
 }
 
 const FilterButton: FC<TProps> = ({ thread, onSelect, activeFilter }) => {
-  const { isLogin } = useAccount()
-
   return (
     <Wrapper>
       <Tooltip
@@ -40,7 +37,6 @@ const FilterButton: FC<TProps> = ({ thread, onSelect, activeFilter }) => {
             <FilterPanel
               thread={thread}
               onSelect={onSelect}
-              isLogin={isLogin}
               activeFilter={activeFilter}
             />
           )