diff --git a/2019-07-22-25305f34/client.html b/2019-07-22-25305f34/client.html new file mode 100644 index 0000000..0874c91 --- /dev/null +++ b/2019-07-22-25305f34/client.html @@ -0,0 +1,64 @@ + + + + + + Webpack Bundle Analyzer + + + + + + + + + +
+ + + diff --git a/2019-07-22-25305f34/server.html b/2019-07-22-25305f34/server.html new file mode 100644 index 0000000..5372e74 --- /dev/null +++ b/2019-07-22-25305f34/server.html @@ -0,0 +1,64 @@ + + + + + + Webpack Bundle Analyzer + + + + + + + + + +
+ + + diff --git a/README.md b/README.md index 86c4086..5577a13 100644 --- a/README.md +++ b/README.md @@ -81,6 +81,21 @@ $ npm run stat + [ ] 当出现 404 页面时,返回真正的 404 状态码,优化 SEO + [ ] 状态优化: 在我的喜欢列表页面取消喜欢时,切回标签页不需要重新发送请求便能展示最新数据 (`List Optimistic UI`) +## 打包体积优化记录 + +今天(2019/07/22)觉得很有必要把优化打包体积的过程给记录一下,至于以前的优化记录,如 `antd` 与 `lodash` 依赖的移除,就不大详细记录了。 + +### ~350KB: 初始大小 +### 191.64KB/242.74KB + ++ [Server Stat](https://shici.xiange.tech/2019-07-22-25305f34/server.html) ++ [Client Stat](https://shici.xiange.tech/2019-07-22-25305f34/client.html) ++ 分析: 去除 `lodash` 与 `antd` 依赖,使打包体积大幅减小。这一步其实在半年前就已经做了,紧接着随后又写了很多页面与组件,所以在去除两者依赖后,真实的打包体积比现在还有缩减。 + +### 176.52KB/245.02KB + ++ 分析: 集中 `gql` 管理 + ## 相关思考与文章 + [关于诗词的 GraphQL API](https://shanyue.tech/post/shici-api/) diff --git a/pages/author/index.js b/pages/author/index.js index d323c14..1d89259 100644 --- a/pages/author/index.js +++ b/pages/author/index.js @@ -1,5 +1,4 @@ import React, { Component } from 'react' -import gql from 'graphql-tag' import { graphql, compose } from 'react-apollo' import { get } from '../../lib/utils' @@ -12,41 +11,7 @@ import Poem from '../../components/Poem' import Pagination from '../../components/Pagination' import AuthorComponent from '../../components/Author' -const AUTHOR = gql` - query AUTHOR ($uuid: ID!) { - author (uuid: $uuid) { - id - uuid - name - intro - birthYear - deathYear - dynasty - } - } -` - -const AUTHOR_POEMS = gql` - query AUTHOR_POEMS ($uuid: ID!, $page: Int) { - author (uuid: $uuid) { - id - poems (page: $page) { - id - uuid - title - kind - tags { - id - name - } - userIsRecite - userIsStar - paragraphs - } - poemsCount - } - } -` +import { AUTHOR, AUTHOR_POEMS } from '../../query.gql' class Author extends Component { static async getInitialProps({ query }) { diff --git a/pages/authors/index.js b/pages/authors/index.js index 95b12cb..b8e0482 100644 --- a/pages/authors/index.js +++ b/pages/authors/index.js @@ -1,5 +1,4 @@ import React, { Component } from 'react' -import gql from 'graphql-tag' import { graphql, compose } from 'react-apollo' import { Router } from '../../routes' @@ -12,20 +11,7 @@ import Pagination from '../../components/Pagination' import Author from '../../components/Author' import Tags from '../../components/Tags' -const AUTHORS = gql` - query AUTHORS ($page: Int, $q: String) { - authors (page: $page, q: $q) { - id - uuid - name - intro - dynasty - birthYear - deathYear - } - authorsCount (q: $q) - } -` +import { AUTHORS } from '../../query.gql' class Authors extends Component { static async getInitialProps({ query }) { diff --git a/query.gql b/query.gql index 531d338..a9105d3 100644 --- a/query.gql +++ b/query.gql @@ -206,3 +206,48 @@ query TAGS { kind } } + +query AUTHORS ($page: Int, $q: String) { + authors (page: $page, q: $q) { + id + uuid + name + intro + dynasty + birthYear + deathYear + } + authorsCount (q: $q) +} + +query AUTHOR ($uuid: ID!) { + author (uuid: $uuid) { + id + uuid + name + intro + birthYear + deathYear + dynasty + } +} + +query AUTHOR_POEMS ($uuid: ID!, $page: Int) { + author (uuid: $uuid) { + id + poems (page: $page) { + id + uuid + title + kind + tags { + id + name + } + userIsRecite + userIsStar + paragraphs + } + poemsCount + } +}