{"id":64182,"date":"2026-01-22T22:48:34","date_gmt":"2026-01-22T14:48:34","guid":{"rendered":"https:\/\/www.wsisp.com\/helps\/64182.html"},"modified":"2026-01-22T22:48:34","modified_gmt":"2026-01-22T14:48:34","slug":"%e5%89%8d%e7%ab%af%e6%80%a7%e8%83%bd%e4%bc%98%e5%8c%96%e7%b3%bb%e5%88%97%ef%bc%88%e4%ba%8c%ef%bc%89%ef%bc%9a%e8%af%b7%e6%b1%82%e4%bc%98%e5%8c%96%e7%ad%96%e7%95%a5","status":"publish","type":"post","link":"https:\/\/www.wsisp.com\/helps\/64182.html","title":{"rendered":"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565"},"content":{"rendered":"

\u4e00\u3001\u8bf7\u6c42\u4f18\u5316\u6838\u5fc3\u601d\u8def<\/h3>\n

1.1 \u4f18\u5316\u56db\u539f\u5219<\/h4>\n

\u8bf7\u6c42\u4f18\u5316\u91d1\u5b57\u5854：
\n \u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n \u2502 \u4e0d\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6700\u4f18（\u7f13\u5b58\u3001\u9884\u52a0\u8f7d）
\n \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n \u2502 \u5c11\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6b21\u4f18（\u5408\u5e76\u3001\u61d2\u52a0\u8f7d）
\n \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n \u2502 \u5c0f\u8bf7\u6c42 \u2502 \u2190 \u4f18\u5316（\u538b\u7f29\u3001\u88c1\u526a）
\n \u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n \u2502 \u5feb\u8bf7\u6c42 \u2502 \u2190 \u57fa\u7840（CDN\u3001HTTP\/2）
\n \u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

\u4f18\u5316\u7b56\u7565：
\n1\ufe0f\u20e3 \u80fd\u4e0d\u53d1\u5c31\u4e0d\u53d1（\u7f13\u5b58）
\n2\ufe0f\u20e3 \u80fd\u5c11\u53d1\u5c31\u5c11\u53d1（\u5408\u5e76\u3001\u61d2\u52a0\u8f7d）
\n3\ufe0f\u20e3 \u80fd\u5c0f\u53d1\u5c31\u5c0f\u53d1（\u538b\u7f29\u3001\u7cbe\u7b80）
\n4\ufe0f\u20e3 \u80fd\u5feb\u53d1\u5c31\u5feb\u53d1（CDN\u3001\u5e76\u884c）<\/p>\n

1.2 \u5e38\u89c1\u95ee\u9898\u5206\u7c7b<\/h4>\n\n\u95ee\u9898\u8868\u73b0\u5f71\u54cd\u4f18\u5148\u7ea7<\/tr>\n\n\n\n\n\n\n
\u8bf7\u6c42\u6570\u91cf\u8fc7\u591a<\/td>\n127\u4e2a\u8bf7\u6c42<\/td>\n\u6d4f\u89c8\u5668\u5e76\u53d1\u9650\u5236\u3001\u961f\u5217\u7b49\u5f85<\/td>\n🔴 \u9ad8<\/td>\n<\/tr>\n
\u5355\u6b21\u8bf7\u6c42\u8fc7\u5927<\/td>\n\u5355\u4e2aAPI 3.2MB<\/td>\n\u7f51\u7edc\u4f20\u8f93\u6162\u3001\u89e3\u6790\u6162<\/td>\n🔴 \u9ad8<\/td>\n<\/tr>\n
\u8bf7\u6c42\u65f6\u673a\u4e0d\u5f53<\/td>\n\u9996\u5c4f\u5168\u91cf\u52a0\u8f7d<\/td>\n\u767d\u5c4f\u65f6\u95f4\u957f<\/td>\n🔴 \u9ad8<\/td>\n<\/tr>\n
\u65e0\u7f13\u5b58\u7b56\u7565<\/td>\n\u6bcf\u6b21\u5168\u91cf\u8bf7\u6c42<\/td>\n\u6d6a\u8d39\u5e26\u5bbd\u3001\u4f53\u9a8c\u5dee<\/td>\n\u26a0\ufe0f \u4e2d<\/td>\n<\/tr>\n
\u4e32\u884c\u8bf7\u6c42<\/td>\n\u7011\u5e03\u6d41<\/td>\n\u603b\u65f6\u95f4\u957f<\/td>\n\u26a0\ufe0f \u4e2d<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
\n

\u4e8c\u3001\u51cf\u5c11\u8bf7\u6c42\u6570\u91cf<\/h3>\n

2.1 \u8d44\u6e90\u5408\u5e76<\/h4>\n

2.1.1 \u56fe\u7247\u96ea\u78a7\u56fe（CSS Sprites）<\/h5>\n

\u95ee\u9898\u573a\u666f：<\/p>\n

<!– \u4f18\u5316\u524d：20\u4e2a\u5c0f\u56fe\u6807 = 20\u4e2a\u8bf7\u6c42 –><\/span>
\n<<\/span>img<\/span> src<\/span>=<\/span>"<\/span>\/icons\/user.png"<\/span><\/span>><\/span><\/span>
\n<<\/span>img<\/span> src<\/span>=<\/span>"<\/span>\/icons\/cart.png"<\/span><\/span>><\/span><\/span>
\n<<\/span>img<\/span> src<\/span>=<\/span>"<\/span>\/icons\/search.png"<\/span><\/span>><\/span><\/span>
\n<!– … 17\u4e2a\u56fe\u6807 … –><\/span><\/p>\n

\u95ee\u9898：
\n– 20\u4e2aHTTP\u8bf7\u6c42
\n– \u6bcf\u4e2a\u8bf7\u6c42\u90fd\u6709TCP\u63e1\u624b\u3001\u6392\u961f\u65f6\u95f4
\n– \u6d4f\u89c8\u5668\u5e76\u53d1\u9650\u5236（6\u4e2a\/\u57df\u540d）<\/p>\n

\u89e3\u51b3\u65b9\u6848：<\/p>\n

\/* \u4f18\u5316\u540e：1\u4e2a\u96ea\u78a7\u56fe = 1\u4e2a\u8bf7\u6c42 *\/<\/span>
\n.sprite<\/span> {<\/span>
\n background-image<\/span>:<\/span> url<\/span>(<\/span>'\/images\/sprite.png'<\/span>)<\/span><\/span>;<\/span>
\n background-repeat<\/span>:<\/span> no-repeat;<\/span>
\n display<\/span>:<\/span> inline-block;<\/span>
\n}<\/span><\/p>\n

.icon-user<\/span> {<\/span>
\n width<\/span>:<\/span> 20px;<\/span>
\n height<\/span>:<\/span> 20px;<\/span>
\n background-position<\/span>:<\/span> 0 0;<\/span>
\n}<\/span><\/p>\n

.icon-cart<\/span> {<\/span>
\n width<\/span>:<\/span> 20px;<\/span>
\n height<\/span>:<\/span> 20px;<\/span>
\n background-position<\/span>:<\/span> -20px 0;<\/span>
\n}<\/span><\/p>\n

.icon-search<\/span> {<\/span>
\n width<\/span>:<\/span> 20px;<\/span>
\n height<\/span>:<\/span> 20px;<\/span>
\n background-position<\/span>:<\/span> -40px 0;<\/span>
\n}<\/span><\/p>\n

\u81ea\u52a8\u5316\u5de5\u5177：<\/p>\n

# \u4f7f\u7528 webpack-spritesmith<\/span>
\nnpm<\/span> install<\/span> webpack-spritesmith –save-dev<\/p>\n

# webpack.config.js<\/span>
\nconst SpritesmithPlugin =<\/span> require(<\/span>'webpack-spritesmith'<\/span>)<\/span>;<\/span><\/p>\n

module.exports =<\/span> {<\/span>
\n plugins: [<\/span>
\n new SpritesmithPlugin(<\/span>{<\/span>
\n src: {<\/span>
\n cwd: path.resolve(<\/span>__dirname, 'src\/assets\/icons'<\/span>)<\/span>,
\n glob: '*.png'<\/span>
\n }<\/span>,
\n target: {<\/span>
\n image: path.resolve(<\/span>__dirname, 'dist\/sprite.png'<\/span>)<\/span>,
\n css: path.resolve(<\/span>__dirname, 'dist\/sprite.css'<\/span>)<\/span>
\n }<\/span>
\n }<\/span>)<\/span>
\n ]<\/span>
\n}<\/span>;<\/span><\/p>\n

\u73b0\u4ee3\u66ff\u4ee3\u65b9\u6848（\u63a8\u8350）：<\/p>\n

<!– \u4f7f\u7528 SVG Sprite（\u66f4\u7075\u6d3b） –><\/span>
\n<<\/span>svg<\/span> class<\/span>=<\/span>"<\/span>icon"<\/span><\/span>><\/span><\/span>
\n <<\/span>use<\/span> xlink:<\/span>href<\/span>=<\/span>"<\/span>#icon-user"<\/span><\/span>><\/span><\/span><\/<\/span>use<\/span>><\/span><\/span>
\n<\/<\/span>svg<\/span>><\/span><\/span><\/p>\n

<!– \u4f7f\u7528 Icon Font –><\/span>
\n<<\/span>i<\/span> class<\/span>=<\/span>"<\/span>iconfont icon-user"<\/span><\/span>><\/span><\/span><\/<\/span>i<\/span>><\/span><\/span><\/p>\n

<!– \u4f7f\u7528\u5185\u8054SVG（\u6700\u4f18） –><\/span>
\n<<\/span>svg<\/span> width<\/span>=<\/span>"<\/span>20"<\/span><\/span> height<\/span>=<\/span>"<\/span>20"<\/span><\/span> viewBox<\/span>=<\/span>"<\/span>0 0 20 20"<\/span><\/span>><\/span><\/span>
\n <<\/span>path<\/span> d<\/span>=<\/span>"<\/span>M10 0C4.48…"<\/span><\/span>\/><\/span><\/span>
\n<\/<\/span>svg<\/span>><\/span><\/span><\/p>\n

\n
2.1.2 JS\/CSS\u5408\u5e76<\/h5>\n

\/\/ \u4f18\u5316\u524d：\u591a\u4e2a\u6587\u4ef6<\/span>
\n<<\/span>script src=<\/span>"jquery.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
\n<<\/span>script src=<\/span>"lodash.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
\n<<\/span>script src=<\/span>"utils.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
\n<<\/span>script src=<\/span>"app.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
\n\/\/ 4\u4e2a\u8bf7\u6c42<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：Webpack\u6253\u5305<\/span>
\n<<\/span>script src=<\/span>"bundle.js"<\/span>><\/span><<\/span>\/<\/span>script><\/span>
\n\/\/ 1\u4e2a\u8bf7\u6c42<\/span><\/p>\n

\/\/ webpack.config.js<\/span>
\nmodule.<\/span>exports =<\/span> {<\/span>
\n entry<\/span>:<\/span> '.\/src\/index.js'<\/span>,<\/span>
\n output<\/span>:<\/span> {<\/span>
\n filename<\/span>:<\/span> 'bundle.[contenthash].js'<\/span>
\n }<\/span>,<\/span>
\n optimization<\/span>:<\/span> {<\/span>
\n splitChunks<\/span>:<\/span> {<\/span>
\n chunks<\/span>:<\/span> 'all'<\/span>,<\/span>
\n cacheGroups<\/span>:<\/span> {<\/span>
\n vendor<\/span>:<\/span> {<\/span>
\n test<\/span>:<\/span> \/<\/span>[\\\\\\\\\/]node_modules[\\\\\\\\\/]<\/span>\/<\/span><\/span>,<\/span>
\n name<\/span>:<\/span> 'vendors'<\/span>,<\/span>
\n priority<\/span>:<\/span> 10<\/span>
\n }<\/span>
\n }<\/span>
\n }<\/span>
\n }<\/span>
\n}<\/span>;<\/span><\/p>\n

\u6ce8\u610f\u4e8b\u9879：<\/p>\n

\u26a0\ufe0f \u5408\u5e76\u4e0d\u662f\u8d8a\u591a\u8d8a\u597d！<\/p>\n

\u8fc7\u5ea6\u5408\u5e76\u7684\u95ee\u9898：
\n\u274c Bundle\u8fc7\u5927（\u8d85\u8fc7500KB）
\n\u274c \u89e3\u6790\u65f6\u95f4\u957f（\u963b\u585e\u6e32\u67d3）
\n\u274c \u7f13\u5b58\u5931\u6548（\u4e00\u4e2a\u6587\u4ef6\u6539\u52a8，\u5168\u90e8\u5931\u6548）<\/p>\n

\u6700\u4f73\u5b9e\u8df5：
\n\u2705 \u6309\u8def\u7531\u5206\u5272（Route-based splitting）
\n\u2705 \u6309\u7ec4\u4ef6\u5206\u5272（Component-based splitting）
\n\u2705 \u7b2c\u4e09\u65b9\u5e93\u5355\u72ec\u6253\u5305（Vendor splitting）<\/p>\n

\n

2.2 \u63a5\u53e3\u5408\u5e76<\/h4>\n

2.2.1 GraphQL（\u63a8\u8350）<\/h5>\n

\u95ee\u9898\u573a\u666f：<\/p>\n

\/\/ RESTful API：3\u4e2a\u8bf7\u6c42\u83b7\u53d6\u7528\u6237\u5b8c\u6574\u4fe1\u606f<\/span>
\nasync<\/span> function<\/span> getUserInfo<\/span>(<\/span>userId<\/span>)<\/span> {<\/span>
\n const<\/span> user =<\/span> await<\/span> fetch<\/span>(<\/span>`<\/span>\/api\/users\/<\/span>${<\/span>userId}<\/span><\/span>`<\/span><\/span>)<\/span>;<\/span> \/\/ \u8bf7\u6c421<\/span>
\n const<\/span> posts =<\/span> await<\/span> fetch<\/span>(<\/span>`<\/span>\/api\/users\/<\/span>${<\/span>userId}<\/span><\/span>\/posts<\/span>`<\/span><\/span>)<\/span>;<\/span> \/\/ \u8bf7\u6c422<\/span>
\n const<\/span> comments =<\/span> await<\/span> fetch<\/span>(<\/span>`<\/span>\/api\/users\/<\/span>${<\/span>userId}<\/span><\/span>\/comments<\/span>`<\/span><\/span>)<\/span>;<\/span> \/\/ \u8bf7\u6c423<\/span><\/p>\n

return<\/span> {<\/span> user,<\/span> posts,<\/span> comments }<\/span>;<\/span>
\n}<\/span>
\n\/\/ \u603b\u8017\u65f6：500ms + 300ms + 200ms = 1000ms（\u4e32\u884c）<\/span><\/p>\n

GraphQL\u65b9\u6848：<\/p>\n

\/\/ 1\u4e2a\u8bf7\u6c42\u83b7\u53d6\u6240\u6709\u6570\u636e<\/span>
\nconst<\/span> query =<\/span> `<\/span>
\n query GetUser($userId: ID!) {
\n user(id: $userId) {
\n id
\n name
\n avatar
\n posts {
\n id
\n title
\n content
\n }
\n comments {
\n id
\n content
\n }
\n }
\n }
\n<\/span>`<\/span><\/span>;<\/span><\/p>\n

const<\/span> data =<\/span> await<\/span> graphqlClient.<\/span>query<\/span>(<\/span>query,<\/span> {<\/span> userId<\/span>:<\/span> 123<\/span> }<\/span>)<\/span>;<\/span>
\n\/\/ \u603b\u8017\u65f6：500ms（1\u4e2a\u8bf7\u6c42）<\/span>
\n\/\/ \u8282\u7701：500ms（50%）<\/span><\/p>\n

\u4f18\u52bf：<\/p>\n

\u2705 \u8bf7\u6c42\u6570\u91cf：3\u4e2a \u2192 1\u4e2a
\n\u2705 \u6570\u636e\u7cbe\u786e：\u53ea\u8fd4\u56de\u9700\u8981\u7684\u5b57\u6bb5
\n\u2705 \u907f\u514d\u8fc7\u5ea6\u83b7\u53d6（Over-fetching）
\n\u2705 \u907f\u514d\u83b7\u53d6\u4e0d\u8db3（Under-fetching）<\/p>\n

\n
2.2.2 BFF（Backend For Frontend）<\/h5>\n

\u67b6\u6784\u8bbe\u8ba1：<\/p>\n

\u4f20\u7edf\u65b9\u5f0f：
\n\u524d\u7aef \u2192 \u7528\u6237\u670d\u52a1 (200ms)
\n \u2192 \u8ba2\u5355\u670d\u52a1 (300ms)
\n \u2192 \u5546\u54c1\u670d\u52a1 (250ms)
\n\u603b\u8017\u65f6：750ms（\u4e32\u884c）\u6216 300ms（\u5e76\u884c，\u4f46\u8bf7\u6c42\u591a）<\/p>\n

BFF\u65b9\u5f0f：
\n\u524d\u7aef \u2192 BFF\u5c42 \u2192 \u7528\u6237\u670d\u52a1
\n \u2192 \u8ba2\u5355\u670d\u52a1
\n \u2192 \u5546\u54c1\u670d\u52a1
\nBFF\u805a\u5408\u6570\u636e \u2192 \u8fd4\u56de\u524d\u7aef
\n\u603b\u8017\u65f6：350ms（BFF\u5185\u90e8\u5e76\u884c + \u805a\u5408）<\/p>\n

\u5b9e\u73b0\u793a\u4f8b（Node.js BFF）：<\/p>\n

\/\/ BFF\u5c42：\u805a\u5408\u591a\u4e2a\u5fae\u670d\u52a1\u6570\u636e<\/span>
\napp.<\/span>get<\/span>(<\/span>'\/api\/page\/dashboard'<\/span>,<\/span> async<\/span> (<\/span>req,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>
\n \/\/ \u5e76\u884c\u8bf7\u6c42\u591a\u4e2a\u670d\u52a1<\/span>
\n const<\/span> [<\/span>user,<\/span> orders,<\/span> products]<\/span> =<\/span> await<\/span> Promise.<\/span>all<\/span>(<\/span>[<\/span>
\n fetch<\/span>(<\/span>'http:\/\/user-service\/api\/user'<\/span>)<\/span>,<\/span>
\n fetch<\/span>(<\/span>'http:\/\/order-service\/api\/orders'<\/span>)<\/span>,<\/span>
\n fetch<\/span>(<\/span>'http:\/\/product-service\/api\/products'<\/span>)<\/span>
\n ]<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u6570\u636e\u805a\u5408\u3001\u5b57\u6bb5\u88c1\u526a<\/span>
\n const<\/span> result =<\/span> {<\/span>
\n user<\/span>:<\/span> {<\/span>
\n id<\/span>:<\/span> user.<\/span>id,<\/span>
\n name<\/span>:<\/span> user.<\/span>name
\n \/\/ \u53ea\u8fd4\u56de\u524d\u7aef\u9700\u8981\u7684\u5b57\u6bb5<\/span>
\n }<\/span>,<\/span>
\n orderCount<\/span>:<\/span> orders.<\/span>total,<\/span>
\n topProducts<\/span>:<\/span> products.<\/span>slice<\/span>(<\/span>0<\/span>,<\/span> 5<\/span>)<\/span>
\n }<\/span>;<\/span><\/p>\n

res.<\/span>json<\/span>(<\/span>result)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u524d\u7aef：\u53ea\u97001\u4e2a\u8bf7\u6c42<\/span>
\nconst<\/span> data =<\/span> await<\/span> fetch<\/span>(<\/span>'\/api\/page\/dashboard'<\/span>)<\/span>;<\/span><\/p>\n

\n
2.2.3 \u6279\u91cf\u63a5\u53e3\u8bbe\u8ba1<\/h5>\n

\/\/ \u4f18\u5316\u524d：\u5faa\u73af\u8bf7\u6c42（N\u4e2a\u8bf7\u6c42）<\/span>
\nasync<\/span> function<\/span> getProductDetails<\/span>(<\/span>productIds<\/span>)<\/span> {<\/span>
\n const<\/span> promises =<\/span> productIds.<\/span>map<\/span>(<\/span>id<\/span> =><\/span>
\n fetch<\/span>(<\/span>`<\/span>\/api\/products\/<\/span>${<\/span>id}<\/span><\/span>`<\/span><\/span>)<\/span>
\n )<\/span>;<\/span>
\n return<\/span> Promise.<\/span>all<\/span>(<\/span>promises)<\/span>;<\/span>
\n}<\/span><\/p>\n

getProductDetails<\/span>(<\/span>[<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>,<\/span> 4<\/span>,<\/span> 5<\/span>]<\/span>)<\/span>;<\/span> \/\/ 5\u4e2a\u8bf7\u6c42<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u6279\u91cf\u63a5\u53e3（1\u4e2a\u8bf7\u6c42）<\/span>
\nasync<\/span> function<\/span> getProductDetailsBatch<\/span>(<\/span>productIds<\/span>)<\/span> {<\/span>
\n return<\/span> fetch<\/span>(<\/span>'\/api\/products\/batch'<\/span>,<\/span> {<\/span>
\n method<\/span>:<\/span> 'POST'<\/span>,<\/span>
\n body<\/span>:<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>{<\/span> ids<\/span>:<\/span> productIds }<\/span>)<\/span>
\n }<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

getProductDetailsBatch<\/span>(<\/span>[<\/span>1<\/span>,<\/span> 2<\/span>,<\/span> 3<\/span>,<\/span> 4<\/span>,<\/span> 5<\/span>]<\/span>)<\/span>;<\/span> \/\/ 1\u4e2a\u8bf7\u6c42<\/span><\/p>\n

\/\/ \u540e\u7aef\u5b9e\u73b0（\u793a\u4f8b）<\/span>
\napp.<\/span>post<\/span>(<\/span>'\/api\/products\/batch'<\/span>,<\/span> async<\/span> (<\/span>req,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> {<\/span> ids }<\/span> =<\/span> req.<\/span>body;<\/span>
\n const<\/span> products =<\/span> await<\/span> ProductModel.<\/span>find<\/span>(<\/span>{<\/span>
\n _id<\/span>:<\/span> {<\/span> $in<\/span>:<\/span> ids }<\/span>
\n }<\/span>)<\/span>;<\/span>
\n res.<\/span>json<\/span>(<\/span>products)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\n

2.3 \u61d2\u52a0\u8f7d\u4e0e\u6309\u9700\u52a0\u8f7d<\/h4>\n

2.3.1 \u8def\u7531\u61d2\u52a0\u8f7d<\/h5>\n

\/\/ React\u793a\u4f8b<\/span>
\n\/\/ \u4f18\u5316\u524d：\u6240\u6709\u8def\u7531\u7ec4\u4ef6\u4e00\u6b21\u6027\u52a0\u8f7d<\/span>
\nimport<\/span> Home from<\/span> '.\/pages\/Home'<\/span>;<\/span>
\nimport<\/span> About from<\/span> '.\/pages\/About'<\/span>;<\/span>
\nimport<\/span> Products from<\/span> '.\/pages\/Products'<\/span>;<\/span>
\nimport<\/span> Dashboard from<\/span> '.\/pages\/Dashboard'<\/span>;<\/span><\/p>\n

const<\/span> routes =<\/span> [<\/span>
\n {<\/span> path<\/span>:<\/span> '\/'<\/span>,<\/span> component<\/span>:<\/span> Home }<\/span>,<\/span>
\n {<\/span> path<\/span>:<\/span> '\/about'<\/span>,<\/span> component<\/span>:<\/span> About }<\/span>,<\/span>
\n {<\/span> path<\/span>:<\/span> '\/products'<\/span>,<\/span> component<\/span>:<\/span> Products }<\/span>,<\/span>
\n {<\/span> path<\/span>:<\/span> '\/dashboard'<\/span>,<\/span> component<\/span>:<\/span> Dashboard }<\/span>
\n]<\/span>;<\/span>
\n\/\/ Bundle\u5927\u5c0f：2.5 MB（\u5305\u542b\u6240\u6709\u9875\u9762）<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u8def\u7531\u61d2\u52a0\u8f7d<\/span>
\nconst<\/span> Home =<\/span> lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/pages\/Home'<\/span>)<\/span>)<\/span>;<\/span>
\nconst<\/span> About =<\/span> lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/pages\/About'<\/span>)<\/span>)<\/span>;<\/span>
\nconst<\/span> Products =<\/span> lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/pages\/Products'<\/span>)<\/span>)<\/span>;<\/span>
\nconst<\/span> Dashboard =<\/span> lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/pages\/Dashboard'<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

const<\/span> routes =<\/span> [<\/span>
\n {<\/span> path<\/span>:<\/span> '\/'<\/span>,<\/span> component<\/span>:<\/span> Home }<\/span>,<\/span>
\n {<\/span> path<\/span>:<\/span> '\/about'<\/span>,<\/span> component<\/span>:<\/span> About }<\/span>,<\/span>
\n {<\/span> path<\/span>:<\/span> '\/products'<\/span>,<\/span> component<\/span>:<\/span> Products }<\/span>,<\/span>
\n {<\/span> path<\/span>:<\/span> '\/dashboard'<\/span>,<\/span> component<\/span>:<\/span> Dashboard }<\/span>
\n]<\/span>;<\/span>
\n\/\/ \u9996\u5c4fBundle：500 KB（\u53ea\u52a0\u8f7dHome\u9875\u9762）<\/span>
\n\/\/ \u5176\u4ed6\u9875\u9762：\u6309\u9700\u52a0\u8f7d（\u8fdb\u5165\u65f6\u624d\u4e0b\u8f7d）<\/span><\/p>\n

\/\/ \u4f7f\u7528<\/span>
\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>
\n return<\/span> (<\/span>
\n <<\/span>Suspense fallback=<\/span>{<\/span><<\/span>Loading \/<\/span>><\/span>}<\/span>><\/span>
\n <<\/span>Routes><\/span>
\n {<\/span>routes.<\/span>map<\/span>(<\/span>route<\/span> =><\/span> (<\/span>
\n <<\/span>Route key=<\/span>{<\/span>route.<\/span>path}<\/span> {<\/span>…<\/span>route}<\/span> \/<\/span>><\/span>
\n )<\/span>)<\/span>}<\/span>
\n <<\/span>\/<\/span>Routes><\/span>
\n <<\/span>\/<\/span>Suspense><\/span>
\n )<\/span>;<\/span>
\n}<\/span><\/p>\n

Vue\u793a\u4f8b：<\/p>\n

\/\/ Vue Router\u61d2\u52a0\u8f7d<\/span>
\nconst<\/span> routes =<\/span> [<\/span>
\n {<\/span>
\n path<\/span>:<\/span> '\/'<\/span>,<\/span>
\n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/views\/Home.vue'<\/span>)<\/span>
\n }<\/span>,<\/span>
\n {<\/span>
\n path<\/span>:<\/span> '\/about'<\/span>,<\/span>
\n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'.\/views\/About.vue'<\/span>)<\/span>
\n }<\/span>
\n]<\/span>;<\/span><\/p>\n

\/\/ \u5206\u7ec4\u6253\u5305（\u76f8\u5173\u9875\u9762\u6253\u5305\u5728\u4e00\u8d77）<\/span>
\nconst<\/span> routes =<\/span> [<\/span>
\n {<\/span>
\n path<\/span>:<\/span> '\/user\/profile'<\/span>,<\/span>
\n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>\/* webpackChunkName: "user" *\/<\/span> '.\/views\/Profile.vue'<\/span>)<\/span>
\n }<\/span>,<\/span>
\n {<\/span>
\n path<\/span>:<\/span> '\/user\/settings'<\/span>,<\/span>
\n component<\/span>:<\/span> (<\/span>)<\/span> =><\/span> import<\/span>(<\/span>\/* webpackChunkName: "user" *\/<\/span> '.\/views\/Settings.vue'<\/span>)<\/span>
\n }<\/span>
\n]<\/span>;<\/span>
\n\/\/ \u751f\u6210 user.[hash].js（\u5305\u542bProfile\u548cSettings）<\/span><\/p>\n

\n
2.3.2 \u7ec4\u4ef6\u61d2\u52a0\u8f7d<\/h5>\n

\/\/ React.lazy<\/span>
\n\/\/ \u4f18\u5316\u524d：ECharts\u56fe\u8868\u5e93\u59cb\u7ec8\u52a0\u8f7d（500KB）<\/span>
\nimport<\/span> ReactECharts from<\/span> 'echarts-for-react'<\/span>;<\/span><\/p>\n

function<\/span> Dashboard<\/span>(<\/span>)<\/span> {<\/span>
\n return<\/span> (<\/span>
\n <<\/span>div><\/span>
\n <<\/span>h1><\/span>Dashboard<<\/span>\/<\/span>h1><\/span>
\n {<\/span>showChart &&<\/span> <<\/span>ReactECharts option=<\/span>{<\/span>option}<\/span> \/<\/span>><\/span>}<\/span>
\n <<\/span>\/<\/span>div><\/span>
\n )<\/span>;<\/span>
\n}<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u70b9\u51fb\u65f6\u624d\u52a0\u8f7d<\/span>
\nconst<\/span> ReactECharts =<\/span> lazy<\/span>(<\/span>(<\/span>)<\/span> =><\/span> import<\/span>(<\/span>'echarts-for-react'<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

function<\/span> Dashboard<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> [<\/span>showChart,<\/span> setShowChart]<\/span> =<\/span> useState<\/span>(<\/span>false<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> (<\/span>
\n <<\/span>div><\/span>
\n <<\/span>h1><\/span>Dashboard<<\/span>\/<\/span>h1><\/span>
\n <<\/span>button onClick=<\/span>{<\/span>(<\/span>)<\/span> =><\/span> setShowChart<\/span>(<\/span>true<\/span>)<\/span>}<\/span>><\/span>\u663e\u793a\u56fe\u8868<<\/span>\/<\/span>button><\/span><\/p>\n

{<\/span>showChart &&<\/span> (<\/span>
\n <<\/span>Suspense fallback=<\/span>{<\/span><<\/span>div><\/span>\u52a0\u8f7d\u4e2d…<\/span><<\/span>\/<\/span>div><\/span>}<\/span>><\/span>
\n <<\/span>ReactECharts option=<\/span>{<\/span>option}<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>Suspense><\/span>
\n )<\/span>}<\/span>
\n <<\/span>\/<\/span>div><\/span>
\n )<\/span>;<\/span>
\n}<\/span>
\n\/\/ \u9996\u6b21\u52a0\u8f7d：\u4e0d\u5305\u542b500KB\u7684ECharts<\/span>
\n\/\/ \u70b9\u51fb\u6309\u94ae\u540e：\u52a8\u6001\u52a0\u8f7dECharts<\/span><\/p>\n

\n
2.3.3 \u56fe\u7247\u61d2\u52a0\u8f7d<\/h5>\n

\/\/ \u65b9\u68481：\u539f\u751fIntersection Observer<\/span>
\nfunction<\/span> LazyImage<\/span>(<\/span>{<\/span> src,<\/span> alt }<\/span><\/span>)<\/span> {<\/span>
\n const<\/span> imgRef =<\/span> useRef<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

useEffect<\/span>(<\/span>(<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> observer =<\/span> new<\/span> IntersectionObserver<\/span>(<\/span>(<\/span>entries<\/span>)<\/span> =><\/span> {<\/span>
\n entries.<\/span>forEach<\/span>(<\/span>entry<\/span> =><\/span> {<\/span>
\n if<\/span> (<\/span>entry.<\/span>isIntersecting)<\/span> {<\/span>
\n const<\/span> img =<\/span> entry.<\/span>target;<\/span>
\n img.<\/span>src =<\/span> img.<\/span>dataset.<\/span>src;<\/span>
\n observer.<\/span>unobserve<\/span>(<\/span>img)<\/span>;<\/span>
\n }<\/span>
\n }<\/span>)<\/span>;<\/span>
\n }<\/span>)<\/span>;<\/span><\/p>\n

observer.<\/span>observe<\/span>(<\/span>imgRef.<\/span>current)<\/span>;<\/span><\/p>\n

return<\/span> (<\/span>)<\/span> =><\/span> observer.<\/span>disconnect<\/span>(<\/span>)<\/span>;<\/span>
\n }<\/span>,<\/span> [<\/span>]<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> <<\/span>img ref=<\/span>{<\/span>imgRef}<\/span> data–<\/span>src=<\/span>{<\/span>src}<\/span> alt=<\/span>{<\/span>alt}<\/span> \/<\/span>><\/span>;<\/span>
\n}<\/span><\/p>\n

\/\/ \u65b9\u68482：loading="lazy"（\u539f\u751f\u652f\u6301，\u6700\u7b80\u5355）<\/span>
\n<<\/span>img src=<\/span>"image.jpg"<\/span> loading=<\/span>"lazy"<\/span> alt=<\/span>"\u4ea7\u54c1\u56fe\u7247"<\/span> \/<\/span>><\/span><\/p>\n

\/\/ \u65b9\u68483：react-lazyload（\u7b2c\u4e09\u65b9\u5e93）<\/span>
\nimport<\/span> LazyLoad from<\/span> 'react-lazyload'<\/span>;<\/span><\/p>\n

<<\/span>LazyLoad height=<\/span>{<\/span>200<\/span>}<\/span> offset=<\/span>{<\/span>100<\/span>}<\/span>><\/span>
\n <<\/span>img src=<\/span>"image.jpg"<\/span> alt=<\/span>"\u4ea7\u54c1\u56fe\u7247"<\/span> \/<\/span>><\/span>
\n<<\/span>\/<\/span>LazyLoad><\/span><\/p>\n

\u6548\u679c\u5bf9\u6bd4：<\/p>\n

\u4f18\u5316\u524d：
\n– \u9875\u9762\u52a0\u8f7d\u65f6：\u4e0b\u8f7d\u6240\u6709\u56fe\u7247（63\u4e2a，9.5MB）
\n– \u7f51\u7edc\u8017\u65f6：8\u79d2<\/p>\n

\u4f18\u5316\u540e（\u61d2\u52a0\u8f7d）：
\n– \u9875\u9762\u52a0\u8f7d\u65f6：\u53ea\u4e0b\u8f7d\u9996\u5c4f\u56fe\u7247（8\u4e2a，1.2MB）
\n– \u7f51\u7edc\u8017\u65f6：1.5\u79d2
\n– \u6eda\u52a8\u65f6：\u6309\u9700\u52a0\u8f7d\u5269\u4f59\u56fe\u7247<\/p>\n

\n

2.4 \u9884\u52a0\u8f7d\u4e0e\u9884\u8fde\u63a5<\/h4>\n

2.4.1 dns-prefetch（DNS\u9884\u89e3\u6790）<\/h5>\n

<!– \u63d0\u524d\u89e3\u6790\u7b2c\u4e09\u65b9\u57df\u540d –><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>dns-prefetch"<\/span><\/span> href<\/span>=<\/span>"<\/span>https:\/\/cdn.example.com"<\/span><\/span>><\/span><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>dns-prefetch"<\/span><\/span> href<\/span>=<\/span>"<\/span>https:\/\/api.example.com"<\/span><\/span>><\/span><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>dns-prefetch"<\/span><\/span> href<\/span>=<\/span>"<\/span>https:\/\/analytics.google.com"<\/span><\/span>><\/span><\/span><\/p>\n

\u6548\u679c：
\n– \u8282\u7701DNS\u67e5\u8be2\u65f6\u95f4（20-120ms）
\n– \u9002\u7528\u4e8e\u5373\u5c06\u8bbf\u95ee\u7684\u57df\u540d<\/p>\n

2.4.2 preconnect（\u9884\u8fde\u63a5）<\/h5>\n

<!– \u63d0\u524d\u5efa\u7acbTCP\u8fde\u63a5 –><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>preconnect"<\/span><\/span> href<\/span>=<\/span>"<\/span>https:\/\/cdn.example.com"<\/span><\/span>><\/span><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>preconnect"<\/span><\/span> href<\/span>=<\/span>"<\/span>https:\/\/api.example.com"<\/span><\/span>><\/span><\/span><\/p>\n

\u6548\u679c：
\n– DNS\u89e3\u6790 + TCP\u63e1\u624b + TLS\u534f\u5546
\n– \u8282\u7701\u65f6\u95f4：100-300ms
\n– \u6ce8\u610f：\u6700\u591a3-6\u4e2a（\u6d4f\u89c8\u5668\u9650\u5236）<\/p>\n

2.4.3 prefetch（\u9884\u83b7\u53d6）<\/h5>\n

<!– \u9884\u83b7\u53d6\u4e0b\u4e00\u4e2a\u9875\u9762\u53ef\u80fd\u7528\u5230\u7684\u8d44\u6e90 –><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>prefetch"<\/span><\/span> href<\/span>=<\/span>"<\/span>\/next-page.js"<\/span><\/span>><\/span><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>prefetch"<\/span><\/span> href<\/span>=<\/span>"<\/span>\/next-page.css"<\/span><\/span>><\/span><\/span><\/p>\n

<!– React Router\u4e2d\u52a8\u6001\u9884\u83b7\u53d6 –><\/span>
\n<Link
\n to="\/products"
\n onMouseEnter={() => {
\n import('.\/pages\/Products'); \/\/ \u9f20\u6807\u60ac\u505c\u65f6\u9884\u52a0\u8f7d
\n }}
\n>
\n \u5546\u54c1\u5217\u8868
\n<\/<\/span>Link<\/span>><\/span><\/span><\/p>\n

\u6548\u679c：
\n– \u7a7a\u95f2\u65f6\u4e0b\u8f7d\u8d44\u6e90（\u4f4e\u4f18\u5148\u7ea7）
\n– \u4e0b\u6b21\u8bbf\u95ee：\u4ece\u7f13\u5b58\u52a0\u8f7d（\u77ac\u95f4\u6253\u5f00）<\/p>\n

2.4.4 preload（\u9884\u52a0\u8f7d）<\/h5>\n

<!– \u9884\u52a0\u8f7d\u5173\u952e\u8d44\u6e90 –><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>preload"<\/span><\/span> href<\/span>=<\/span>"<\/span>\/fonts\/custom.woff2"<\/span><\/span> as<\/span>=<\/span>"<\/span>font"<\/span><\/span> crossorigin<\/span>><\/span><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>preload"<\/span><\/span> href<\/span>=<\/span>"<\/span>\/critical.css"<\/span><\/span> as<\/span>=<\/span>"<\/span>style"<\/span><\/span>><\/span><\/span>
\n<<\/span>link<\/span> rel<\/span>=<\/span>"<\/span>preload"<\/span><\/span> href<\/span>=<\/span>"<\/span>\/hero-image.jpg"<\/span><\/span> as<\/span>=<\/span>"<\/span>image"<\/span><\/span>><\/span><\/span><\/p>\n

\u6548\u679c：
\n– \u9ad8\u4f18\u5148\u7ea7\u52a0\u8f7d
\n– \u907f\u514d\u963b\u585e\u6e32\u67d3
\n– \u9002\u7528\u4e8e\u9996\u5c4f\u5173\u952e\u8d44\u6e90<\/p>\n

\u56db\u79cd\u9884\u52a0\u8f7d\u5bf9\u6bd4：<\/p>\n

\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u6280\u672f \u2502 \u65f6\u673a \u2502 \u4f18\u5148\u7ea7 \u2502 \u9002\u7528\u573a\u666f \u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 dns-prefetch\u2502 \u63d0\u524dDNS\u89e3\u6790 \u2502 \u4f4e \u2502 \u7b2c\u4e09\u65b9\u57df\u540d\u2502
\n\u2502 preconnect \u2502 \u63d0\u524d\u5efa\u7acb\u8fde\u63a5 \u2502 \u4e2d \u2502 API\u57df\u540d \u2502
\n\u2502 prefetch \u2502 \u7a7a\u95f2\u65f6\u4e0b\u8f7d \u2502 \u4f4e \u2502 \u4e0b\u4e00\u9875\u9762 \u2502
\n\u2502 preload \u2502 \u7acb\u5373\u4e0b\u8f7d \u2502 \u9ad8 \u2502 \u5173\u952e\u8d44\u6e90 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

\n

\u4e09\u3001\u51cf\u5c0f\u8bf7\u6c42\u4f53\u79ef<\/h3>\n

3.1 \u6570\u636e\u538b\u7f29<\/h4>\n

3.1.1 Gzip \/ Brotli\u538b\u7f29<\/h5>\n

# Nginx\u914d\u7f6e
\nhttp {
\n # \u5f00\u542fGzip
\n gzip on;
\n gzip_min_length 1k;
\n gzip_comp_level 6;
\n gzip_types text\/plain text\/css application\/json application\/javascript;
\n gzip_vary on;<\/p>\n

# \u5f00\u542fBrotli（\u66f4\u9ad8\u538b\u7f29\u7387）
\n brotli on;
\n brotli_comp_level 6;
\n brotli_types text\/plain text\/css application\/json application\/javascript;
\n}<\/p>\n

\u538b\u7f29\u6548\u679c：
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u6587\u4ef6\u7c7b\u578b \u2502 \u539f\u59cb\u5927\u5c0f \u2502 Gzip\u538b\u7f29 \u2502 Brotli\u538b\u7f29\u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 app.js \u2502 500 KB \u2502 150 KB \u2502 120 KB \u2502
\n\u2502 styles.css \u2502 200 KB \u2502 40 KB \u2502 30 KB \u2502
\n\u2502 data.json \u2502 1 MB \u2502 100 KB \u2502 80 KB \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

\u538b\u7f29\u7387：70-90%<\/p>\n

3.1.2 \u56fe\u7247\u538b\u7f29<\/h5>\n

# \u4f7f\u7528imagemin-webpack-plugin<\/span>
\nnpm<\/span> install<\/span> imagemin-webpack-plugin –save-dev<\/p>\n

# webpack.config.js<\/span>
\nconst ImageminPlugin =<\/span> require(<\/span>'imagemin-webpack-plugin'<\/span>)<\/span>.default;<\/span><\/p>\n

module.exports =<\/span> {<\/span>
\n plugins: [<\/span>
\n new ImageminPlugin(<\/span>{<\/span>
\n pngquant: {<\/span>
\n quality: '80-90'<\/span> \/\/ PNG\u538b\u7f29\u8d28\u91cf
\n }<\/span>,
\n jpegtran: {<\/span>
\n progressive: true<\/span> \/\/ JPEG\u6e10\u8fdb\u5f0f
\n }<\/span>,
\n optipng: {<\/span>
\n optimizationLevel: 5<\/span> \/\/ PNG\u4f18\u5316\u7ea7\u522b
\n }<\/span>
\n }<\/span>)<\/span>
\n ]<\/span>
\n}<\/span>;<\/span><\/p>\n

\u538b\u7f29\u6548\u679c：
\n\u539f\u56fe：2 MB（4000×3000 PNG）
\n\u538b\u7f29\u540e：200 KB（\u8d28\u91cf\u51e0\u4e4e\u65e0\u635f）
\n\u538b\u7f29\u7387：90%<\/p>\n

\u73b0\u4ee3\u56fe\u7247\u683c\u5f0f：<\/p>\n

<!– WebP\u683c\u5f0f（\u63a8\u8350） –><\/span>
\n<<\/span>picture<\/span>><\/span><\/span>
\n <<\/span>source<\/span> srcset<\/span>=<\/span>"<\/span>image.webp"<\/span><\/span> type<\/span>=<\/span>"<\/span>image\/webp"<\/span><\/span>><\/span><\/span>
\n <<\/span>source<\/span> srcset<\/span>=<\/span>"<\/span>image.jpg"<\/span><\/span> type<\/span>=<\/span>"<\/span>image\/jpeg"<\/span><\/span>><\/span><\/span>
\n <<\/span>img<\/span> src<\/span>=<\/span>"<\/span>image.jpg"<\/span><\/span> alt<\/span>=<\/span>"<\/span>\u4ea7\u54c1\u56fe\u7247"<\/span><\/span>><\/span><\/span>
\n<\/<\/span>picture<\/span>><\/span><\/span><\/p>\n

\u683c\u5f0f\u5bf9\u6bd4：
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u683c\u5f0f \u2502 \u6587\u4ef6\u5927\u5c0f \u2502 \u538b\u7f29\u7387 \u2502 \u652f\u6301\u5ea6 \u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 JPEG \u2502 150 KB \u2502 \u57fa\u51c6 \u2502 100% \u2502
\n\u2502 PNG \u2502 200 KB \u2502 -33% \u2502 100% \u2502
\n\u2502 WebP \u2502 80 KB \u2502 +47% \u2502 96% \u2502
\n\u2502 AVIF \u2502 50 KB \u2502 +67% \u2502 85% \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

\n

3.2 \u6570\u636e\u88c1\u526a<\/h4>\n

3.2.1 \u5b57\u6bb5\u8fc7\u6ee4<\/h5>\n

\/\/ \u540e\u7aef：\u53ea\u8fd4\u56de\u524d\u7aef\u9700\u8981\u7684\u5b57\u6bb5<\/span>
\n\/\/ \u4f18\u5316\u524d：\u8fd4\u56de\u5b8c\u6574\u7528\u6237\u5bf9\u8c61<\/span>
\napp.<\/span>get<\/span>(<\/span>'\/api\/users\/:id'<\/span>,<\/span> async<\/span> (<\/span>req,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> user =<\/span> await<\/span> User.<\/span>findById<\/span>(<\/span>req.<\/span>params.<\/span>id)<\/span>;<\/span>
\n res.<\/span>json<\/span>(<\/span>user)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\n\/\/ \u54cd\u5e94\u6570\u636e：2 KB（\u5305\u542bpassword\u3001internalId\u7b49\u654f\u611f\u5b57\u6bb5）<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u5b57\u6bb5\u8fc7\u6ee4<\/span>
\napp.<\/span>get<\/span>(<\/span>'\/api\/users\/:id'<\/span>,<\/span> async<\/span> (<\/span>req,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> user =<\/span> await<\/span> User.<\/span>findById<\/span>(<\/span>req.<\/span>params.<\/span>id)<\/span>
\n .<\/span>select<\/span>(<\/span>'id name avatar email createdAt'<\/span>)<\/span>;<\/span> \/\/ \u53ea\u9009\u62e9\u9700\u8981\u7684\u5b57\u6bb5<\/span>
\n res.<\/span>json<\/span>(<\/span>user)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\n\/\/ \u54cd\u5e94\u6570\u636e：300 B（\u51cf\u5c1185%）<\/span><\/p>\n

\/\/ \u524d\u7aef：GraphQL\u65b9\u5f0f<\/span>
\nquery GetUser<\/span>(<\/span>$id<\/span>:<\/span> ID<\/span>!<\/span><\/span>)<\/span> {<\/span>
\n user<\/span>(<\/span>id<\/span>:<\/span> $id<\/span>)<\/span> {<\/span>
\n id
\n name
\n avatar
\n # \u53ea\u8bf7\u6c42\u9700\u8981\u7684\u5b57\u6bb5
\n }<\/span>
\n}<\/span><\/p>\n

3.2.2 \u5206\u9875\u52a0\u8f7d<\/h5>\n

\/\/ \u4f18\u5316\u524d：\u4e00\u6b21\u6027\u8fd4\u56de2000\u6761\u6570\u636e<\/span>
\napp.<\/span>get<\/span>(<\/span>'\/api\/products'<\/span>,<\/span> async<\/span> (<\/span>req,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> products =<\/span> await<\/span> Product.<\/span>find<\/span>(<\/span>)<\/span>;<\/span>
\n res.<\/span>json<\/span>(<\/span>products)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\n\/\/ \u54cd\u5e94\u5927\u5c0f：3.2 MB<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u5206\u9875<\/span>
\napp.<\/span>get<\/span>(<\/span>'\/api\/products'<\/span>,<\/span> async<\/span> (<\/span>req,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> {<\/span> page =<\/span> 1<\/span>,<\/span> pageSize =<\/span> 20<\/span> }<\/span> =<\/span> req.<\/span>query;<\/span><\/p>\n

const<\/span> products =<\/span> await<\/span> Product.<\/span>find<\/span>(<\/span>)<\/span>
\n .<\/span>skip<\/span>(<\/span>(<\/span>page –<\/span> 1<\/span>)<\/span> *<\/span> pageSize)<\/span>
\n .<\/span>limit<\/span>(<\/span>pageSize)<\/span>;<\/span><\/p>\n

const<\/span> total =<\/span> await<\/span> Product.<\/span>countDocuments<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

res.<\/span>json<\/span>(<\/span>{<\/span>
\n data<\/span>:<\/span> products,<\/span>
\n pagination<\/span>:<\/span> {<\/span>
\n page<\/span>:<\/span> parseInt<\/span>(<\/span>page)<\/span>,<\/span>
\n pageSize<\/span>:<\/span> parseInt<\/span>(<\/span>pageSize)<\/span>,<\/span>
\n total,<\/span>
\n totalPages<\/span>:<\/span> Math.<\/span>ceil<\/span>(<\/span>total \/<\/span> pageSize)<\/span>
\n }<\/span>
\n }<\/span>)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span>
\n\/\/ \u9996\u6b21\u54cd\u5e94：32 KB（20\u6761\u6570\u636e）<\/span>
\n\/\/ \u51cf\u5c11：99%<\/span><\/p>\n

3.2.3 \u865a\u62df\u6eda\u52a8（Virtual Scrolling）<\/h5>\n

\/\/ React-Window\u793a\u4f8b<\/span>
\nimport<\/span> {<\/span> FixedSizeList }<\/span> from<\/span> 'react-window'<\/span>;<\/span><\/p>\n

\/\/ \u4f18\u5316\u524d：\u6e32\u67d32000\u4e2aDOM\u8282\u70b9<\/span>
\nfunction<\/span> ProductList<\/span>(<\/span>{<\/span> products }<\/span><\/span>)<\/span> {<\/span>
\n return<\/span> (<\/span>
\n <<\/span>div><\/span>
\n {<\/span>products.<\/span>map<\/span>(<\/span>product<\/span> =><\/span> (<\/span>
\n <<\/span>ProductCard key=<\/span>{<\/span>product.<\/span>id}<\/span> data=<\/span>{<\/span>product}<\/span> \/<\/span>><\/span>
\n )<\/span>)<\/span>}<\/span>
\n <<\/span>\/<\/span>div><\/span>
\n )<\/span>;<\/span>
\n}<\/span>
\n\/\/ \u95ee\u9898：<\/span>
\n\/\/ – 2000\u4e2aDOM\u8282\u70b9<\/span>
\n\/\/ – \u6e32\u67d3\u65f6\u95f4：1.5s<\/span>
\n\/\/ – \u5185\u5b58\u5360\u7528：150 MB<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u865a\u62df\u6eda\u52a8（\u53ea\u6e32\u67d3\u53ef\u89c1\u90e8\u5206）<\/span>
\nfunction<\/span> ProductList<\/span>(<\/span>{<\/span> products }<\/span><\/span>)<\/span> {<\/span>
\n return<\/span> (<\/span>
\n <<\/span>FixedSizeList
\n height=<\/span>{<\/span>600<\/span>}<\/span> \/\/ \u5bb9\u5668\u9ad8\u5ea6<\/span>
\n itemCount=<\/span>{<\/span>products.<\/span>length}<\/span>
\n itemSize=<\/span>{<\/span>100<\/span>}<\/span> \/\/ \u6bcf\u9879\u9ad8\u5ea6<\/span>
\n width=<\/span>"100%"<\/span>
\n ><\/span>
\n {<\/span>(<\/span>{<\/span> index,<\/span> style }<\/span><\/span>)<\/span> =><\/span> (<\/span>
\n <<\/span>div style=<\/span>{<\/span>style}<\/span>><\/span>
\n <<\/span>ProductCard data=<\/span>{<\/span>products[<\/span>index]<\/span>}<\/span> \/<\/span>><\/span>
\n <<\/span>\/<\/span>div><\/span>
\n )<\/span>}<\/span>
\n <<\/span>\/<\/span>FixedSizeList><\/span>
\n )<\/span>;<\/span>
\n}<\/span>
\n\/\/ \u4f18\u5316\u6548\u679c：<\/span>
\n\/\/ – \u53ea\u6e32\u67d37\u4e2a\u53ef\u89c1DOM\u8282\u70b9（600\/100 = 6，+1\u7f13\u51b2）<\/span>
\n\/\/ – \u6e32\u67d3\u65f6\u95f4：50ms<\/span>
\n\/\/ – \u5185\u5b58\u5360\u7528：5 MB<\/span><\/p>\n

\n

3.3 Tree Shaking（\u6811\u6447）<\/h4>\n

\/\/ \u4f18\u5316\u524d：\u5f15\u5165\u6574\u4e2alodash\u5e93<\/span>
\nimport<\/span> _ from<\/span> 'lodash'<\/span>;<\/span>
\n_.<\/span>debounce<\/span>(<\/span>func,<\/span> 300<\/span>)<\/span>;<\/span>
\n\/\/ Bundle\u589e\u52a0：70 KB<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u6309\u9700\u5f15\u5165<\/span>
\nimport<\/span> debounce from<\/span> 'lodash\/debounce'<\/span>;<\/span>
\n\/\/ Bundle\u589e\u52a0：2 KB<\/span><\/p>\n

\/\/ \u66f4\u597d\u7684\u65b9\u5f0f：\u4f7f\u7528lodash-es（\u652f\u6301Tree Shaking）<\/span>
\nimport<\/span> {<\/span> debounce }<\/span> from<\/span> 'lodash-es'<\/span>;<\/span>
\n\/\/ \u914d\u5408Webpack Tree Shaking，\u81ea\u52a8\u79fb\u9664\u672a\u4f7f\u7528\u4ee3\u7801<\/span><\/p>\n

\/\/ package.json\u914d\u7f6e<\/span>
\n{<\/span>
\n "sideEffects"<\/span>:<\/span> false<\/span> \/\/ \u6807\u8bb0\u4e3a\u65e0\u526f\u4f5c\u7528，\u5141\u8bb8Tree Shaking<\/span>
\n}<\/span><\/p>\n

\/\/ webpack.config.js<\/span>
\nmodule.<\/span>exports =<\/span> {<\/span>
\n mode<\/span>:<\/span> 'production'<\/span>,<\/span> \/\/ \u751f\u4ea7\u6a21\u5f0f\u81ea\u52a8\u5f00\u542fTree Shaking<\/span>
\n optimization<\/span>:<\/span> {<\/span>
\n usedExports<\/span>:<\/span> true<\/span> \/\/ \u6807\u8bb0\u672a\u4f7f\u7528\u7684\u5bfc\u51fa<\/span>
\n }<\/span>
\n}<\/span>;<\/span><\/p>\n

\n

\u56db\u3001\u63d0\u5347\u8bf7\u6c42\u901f\u5ea6<\/h3>\n

4.1 CDN\u52a0\u901f<\/h4>\n

<!– \u4f18\u5316\u524d：\u9759\u6001\u8d44\u6e90\u4ece\u6e90\u7ad9\u52a0\u8f7d –><\/span>
\n<<\/span>script<\/span> src<\/span>=<\/span>"<\/span>https:\/\/www.example.com\/static\/app.js"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n<!– \u7528\u6237\u5728\u5e7f\u5dde，\u670d\u52a1\u5668\u5728\u5317\u4eac –><\/span>
\n<!– \u7f51\u7edc\u5ef6\u8fdf：50ms RTT \u00d7 3\u6b21\u63e1\u624b = 150ms –><\/span>
\n<!– \u4e0b\u8f7d\u65f6\u95f4：500KB \u00f7 5MB\/s = 100ms –><\/span>
\n<!– \u603b\u8017\u65f6：250ms –><\/span><\/p>\n

<!– \u4f18\u5316\u540e：\u4f7f\u7528CDN –><\/span>
\n<<\/span>script<\/span> src<\/span>=<\/span>"<\/span>https:\/\/cdn.example.com\/static\/app.js"<\/span><\/span>><\/span><\/span><\/span><\/<\/span>script<\/span>><\/span><\/span>
\n<!– CDN\u8282\u70b9\u5728\u5e7f\u5dde（\u5c31\u8fd1\u8bbf\u95ee）–><\/span>
\n<!– \u7f51\u7edc\u5ef6\u8fdf：5ms RTT \u00d7 3\u6b21\u63e1\u624b = 15ms –><\/span>
\n<!– \u4e0b\u8f7d\u65f6\u95f4：500KB \u00f7 50MB\/s = 10ms –><\/span>
\n<!– \u603b\u8017\u65f6：25ms –><\/span>
\n<!– \u63d0\u5347：90% –><\/span><\/p>\n

CDN\u914d\u7f6e\u793a\u4f8b（\u963f\u91cc\u4e91OSS + CDN）：
\n1. \u4e0a\u4f20\u9759\u6001\u8d44\u6e90\u5230OSS
\n2. \u7ed1\u5b9aCDN\u57df\u540d
\n3. \u914d\u7f6e\u7f13\u5b58\u7b56\u7565：
\n – HTML: \u4e0d\u7f13\u5b58
\n – JS\/CSS: 1\u5e74（\u6587\u4ef6\u540d\u5e26hash）
\n – \u56fe\u7247: 1\u5e74<\/p>\n

\n

4.2 HTTP\/2<\/h4>\n

HTTP\/1.1\u95ee\u9898：
\n– \u6d4f\u89c8\u5668\u9650\u52366\u4e2a\u5e76\u53d1\u8fde\u63a5
\n– \u961f\u5934\u963b\u585e（HOL Blocking）
\n– \u91cd\u590d\u7684Header<\/p>\n

HTTP\/2\u4f18\u52bf：
\n\u2705 \u591a\u8def\u590d\u7528（Multiplexing）
\n – 1\u4e2a\u8fde\u63a5，\u65e0\u9650\u5236\u5e76\u53d1\u8bf7\u6c42
\n – \u89e3\u51b3\u961f\u5934\u963b\u585e
\n\u2705 Header\u538b\u7f29（HPACK）
\n – \u51cf\u5c11\u91cd\u590dHeader
\n – \u8282\u7701\u5e26\u5bbd
\n\u2705 Server Push（\u670d\u52a1\u5668\u63a8\u9001）
\n – \u4e3b\u52a8\u63a8\u9001CSS\u3001JS
\n – \u65e0\u9700\u7b49\u5f85\u8bf7\u6c42<\/p>\n

\u6548\u679c\u5bf9\u6bd4：
\nHTTP\/1.1：\u52a0\u8f7d100\u4e2a\u8d44\u6e90
\n\u251c\u2500\u2500 6\u4e2a\u5e76\u53d1
\n\u251c\u2500\u2500 \u9700\u898117\u8f6e（100\/6）
\n\u251c\u2500\u2500 \u6bcf\u8f6e\u7b49\u5f85\u5ef6\u8fdf：50ms
\n\u2514\u2500\u2500 \u603b\u989d\u5916\u5ef6\u8fdf：850ms<\/p>\n

HTTP\/2：\u52a0\u8f7d100\u4e2a\u8d44\u6e90
\n\u251c\u2500\u2500 \u65e0\u9650\u5e76\u53d1
\n\u251c\u2500\u2500 1\u8f6e\u5b8c\u6210
\n\u251c\u2500\u2500 \u5ef6\u8fdf：50ms
\n\u2514\u2500\u2500 \u8282\u7701：800ms<\/p>\n

Nginx\u542f\u7528HTTP\/2：<\/p>\n

server {
\n listen 443 ssl http2; # \u542f\u7528HTTP\/2
\n server_name example.com;<\/p>\n

ssl_certificate \/path\/to\/cert.pem;
\n ssl_certificate_key \/path\/to\/key.pem;
\n}<\/p>\n

\n

4.3 \u8bf7\u6c42\u5e76\u884c\u5316<\/h4>\n

\/\/ \u4f18\u5316\u524d：\u4e32\u884c\u8bf7\u6c42<\/span>
\nasync<\/span> function<\/span> loadData<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> user =<\/span> await<\/span> fetch<\/span>(<\/span>'\/api\/user'<\/span>)<\/span>;<\/span> \/\/ 300ms<\/span>
\n const<\/span> orders =<\/span> await<\/span> fetch<\/span>(<\/span>'\/api\/orders'<\/span>)<\/span>;<\/span> \/\/ 400ms<\/span>
\n const<\/span> products =<\/span> await<\/span> fetch<\/span>(<\/span>'\/api\/products'<\/span>)<\/span>;<\/span>\/\/ 200ms<\/span>
\n return<\/span> {<\/span> user,<\/span> orders,<\/span> products }<\/span>;<\/span>
\n}<\/span>
\n\/\/ \u603b\u8017\u65f6：900ms<\/span><\/p>\n

\/\/ \u4f18\u5316\u540e：\u5e76\u884c\u8bf7\u6c42<\/span>
\nasync<\/span> function<\/span> loadData<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> [<\/span>user,<\/span> orders,<\/span> products]<\/span> =<\/span> await<\/span> Promise.<\/span>all<\/span>(<\/span>[<\/span>
\n fetch<\/span>(<\/span>'\/api\/user'<\/span>)<\/span>,<\/span>
\n fetch<\/span>(<\/span>'\/api\/orders'<\/span>)<\/span>,<\/span>
\n fetch<\/span>(<\/span>'\/api\/products'<\/span>)<\/span>
\n ]<\/span>)<\/span>;<\/span>
\n return<\/span> {<\/span> user,<\/span> orders,<\/span> products }<\/span>;<\/span>
\n}<\/span>
\n\/\/ \u603b\u8017\u65f6：400ms（\u6700\u6162\u7684\u8bf7\u6c42）<\/span>
\n\/\/ \u63d0\u5347：55%<\/span><\/p>\n

\/\/ \u8fdb\u9636：\u5e76\u53d1\u63a7\u5236（\u907f\u514d\u540c\u65f6\u53d1\u8d77100\u4e2a\u8bf7\u6c42）<\/span>
\nasync<\/span> function<\/span> batchFetch<\/span>(<\/span>urls,<\/span> concurrency =<\/span> 6<\/span><\/span>)<\/span> {<\/span>
\n const<\/span> results =<\/span> [<\/span>]<\/span>;<\/span>
\n const<\/span> queue =<\/span> [<\/span>…<\/span>urls]<\/span>;<\/span><\/p>\n

async<\/span> function<\/span> worker<\/span>(<\/span>)<\/span> {<\/span>
\n while<\/span> (<\/span>queue.<\/span>length ><\/span> 0<\/span>)<\/span> {<\/span>
\n const<\/span> url =<\/span> queue.<\/span>shift<\/span>(<\/span>)<\/span>;<\/span>
\n const<\/span> result =<\/span> await<\/span> fetch<\/span>(<\/span>url)<\/span>;<\/span>
\n results.<\/span>push<\/span>(<\/span>result)<\/span>;<\/span>
\n }<\/span>
\n }<\/span><\/p>\n

\/\/ \u542f\u52a86\u4e2a\u5e76\u53d1worker<\/span>
\n await<\/span> Promise.<\/span>all<\/span>(<\/span>
\n Array<\/span>(<\/span>concurrency)<\/span>.<\/span>fill<\/span>(<\/span>0<\/span>)<\/span>.<\/span>map<\/span>(<\/span>(<\/span>)<\/span> =><\/span> worker<\/span>(<\/span>)<\/span>)<\/span>
\n )<\/span>;<\/span><\/p>\n

return<\/span> results;<\/span>
\n}<\/span><\/p>\n

\/\/ \u4f7f\u7528<\/span>
\nawait<\/span> batchFetch<\/span>(<\/span>productUrls,<\/span> 6<\/span>)<\/span>;<\/span><\/p>\n

\n

\u4e94\u3001\u667a\u80fd\u7f13\u5b58\u7b56\u7565<\/h3>\n

5.1 HTTP\u7f13\u5b58<\/h4>\n

5.1.1 \u5f3a\u7f13\u5b58（Cache-Control）<\/h5>\n

# Nginx\u914d\u7f6e
\nlocation ~* \\\\.(js|css|png|jpg|jpeg|gif|ico|woff2)$ {
\n expires 1y; # 1\u5e74
\n add_header Cache-Control "public, immutable";
\n}<\/p>\n

location ~* \\\\.html$ {
\n expires -1; # \u4e0d\u7f13\u5b58
\n add_header Cache-Control "no-cache";
\n}<\/p>\n

\u6548\u679c：
\n\u7b2c\u4e00\u6b21\u8bbf\u95ee：
\n– app.123abc.js (500 KB) – \u4e0b\u8f7d\u8017\u65f6 500ms<\/p>\n

\u7b2c\u4e8c\u6b21\u8bbf\u95ee（\u6587\u4ef6\u672a\u53d8）：
\n– app.123abc.js – \u4ece\u7f13\u5b58\u8bfb\u53d6 (0ms) \u2705<\/p>\n

\u6587\u4ef6\u66f4\u65b0\u540e：
\n– app.456def.js (500 KB) – \u4e0b\u8f7d\u65b0\u6587\u4ef6
\n– \u65e7\u7f13\u5b58\u81ea\u52a8\u5931\u6548（\u6587\u4ef6\u540d\u53d8\u4e86）<\/p>\n

5.1.2 \u534f\u5546\u7f13\u5b58（ETag \/ Last-Modified）<\/h5>\n

\u5de5\u4f5c\u6d41\u7a0b：
\n1. \u9996\u6b21\u8bf7\u6c42
\n \u6d4f\u89c8\u5668 \u2192 \u670d\u52a1\u5668：GET \/api\/products
\n \u670d\u52a1\u5668 \u2192 \u6d4f\u89c8\u5668：200 OK
\n ETag: "v1.0"
\n Data: {…}<\/p>\n

2. \u518d\u6b21\u8bf7\u6c42
\n \u6d4f\u89c8\u5668 \u2192 \u670d\u52a1\u5668：GET \/api\/products
\n If-None-Match: "v1.0"<\/p>\n

\u5982\u679c\u6570\u636e\u672a\u53d8：
\n \u670d\u52a1\u5668 \u2192 \u6d4f\u89c8\u5668：304 Not Modified
\n (\u65e0Body，\u8282\u7701\u5e26\u5bbd)<\/p>\n

\u5982\u679c\u6570\u636e\u5df2\u53d8：
\n \u670d\u52a1\u5668 \u2192 \u6d4f\u89c8\u5668：200 OK
\n ETag: "v2.0"
\n Data: {…}<\/p>\n

\u6548\u679c：
\n– \u8282\u7701\u5e26\u5bbd（304\u54cd\u5e94\u65e0Body）
\n– \u51cf\u5c11\u670d\u52a1\u5668\u538b\u529b（\u6570\u636e\u672a\u53d8\u65f6\u65e0\u9700\u67e5\u8be2DB）<\/p>\n

\u540e\u7aef\u5b9e\u73b0（Express）：<\/p>\n

const<\/span> express =<\/span> require<\/span>(<\/span>'express'<\/span>)<\/span>;<\/span>
\nconst<\/span> etag =<\/span> require<\/span>(<\/span>'etag'<\/span>)<\/span>;<\/span><\/p>\n

app.<\/span>get<\/span>(<\/span>'\/api\/products'<\/span>,<\/span> async<\/span> (<\/span>req,<\/span> res<\/span>)<\/span> =><\/span> {<\/span>
\n const<\/span> products =<\/span> await<\/span> getProducts<\/span>(<\/span>)<\/span>;<\/span>
\n const<\/span> dataString =<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>products)<\/span>;<\/span>
\n const<\/span> hash =<\/span> etag<\/span>(<\/span>dataString)<\/span>;<\/span><\/p>\n

\/\/ \u68c0\u67e5\u5ba2\u6237\u7aefETag<\/span>
\n if<\/span> (<\/span>req.<\/span>headers[<\/span>'if-none-match'<\/span>]<\/span> ===<\/span> hash)<\/span> {<\/span>
\n return<\/span> res.<\/span>status<\/span>(<\/span>304<\/span>)<\/span>.<\/span>end<\/span>(<\/span>)<\/span>;<\/span> \/\/ 304 Not Modified<\/span>
\n }<\/span><\/p>\n

res.<\/span>setHeader<\/span>(<\/span>'ETag'<\/span>,<\/span> hash)<\/span>;<\/span>
\n res.<\/span>json<\/span>(<\/span>products)<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\n

5.2 \u524d\u7aef\u7f13\u5b58<\/h4>\n

5.2.1 Memory Cache（\u5185\u5b58\u7f13\u5b58）<\/h5>\n

\/\/ \u7b80\u5355\u7684\u5185\u5b58\u7f13\u5b58<\/span>
\nconst<\/span> cache =<\/span> new<\/span> Map<\/span>(<\/span>)<\/span>;<\/span><\/p>\n

async<\/span> function<\/span> fetchWithCache<\/span>(<\/span>url,<\/span> ttl =<\/span> 60000<\/span><\/span>)<\/span> {<\/span>
\n const<\/span> cached =<\/span> cache.<\/span>get<\/span>(<\/span>url)<\/span>;<\/span><\/p>\n

if<\/span> (<\/span>cached &&<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span> –<\/span> cached.<\/span>time <<\/span> ttl)<\/span> {<\/span>
\n console.<\/span>log<\/span>(<\/span>'\u4ece\u7f13\u5b58\u8bfb\u53d6'<\/span>)<\/span>;<\/span>
\n return<\/span> cached.<\/span>data;<\/span>
\n }<\/span><\/p>\n

console.<\/span>log<\/span>(<\/span>'\u53d1\u8d77\u8bf7\u6c42'<\/span>)<\/span>;<\/span>
\n const<\/span> data =<\/span> await<\/span> fetch<\/span>(<\/span>url)<\/span>.<\/span>then<\/span>(<\/span>r<\/span> =><\/span> r.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>;<\/span><\/p>\n

cache.<\/span>set<\/span>(<\/span>url,<\/span> {<\/span>
\n data,<\/span>
\n time<\/span>:<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span>
\n }<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> data;<\/span>
\n}<\/span><\/p>\n

\/\/ \u4f7f\u7528<\/span>
\nconst<\/span> products =<\/span> await<\/span> fetchWithCache<\/span>(<\/span>'\/api\/products'<\/span>,<\/span> 5<\/span> *<\/span> 60<\/span> *<\/span> 1000<\/span>)<\/span>;<\/span> \/\/ 5\u5206\u949f\u7f13\u5b58<\/span><\/p>\n

5.2.2 LocalStorage\u7f13\u5b58<\/h5>\n

\/\/ \u5e26\u8fc7\u671f\u65f6\u95f4\u7684LocalStorage<\/span>
\nfunction<\/span> setCache<\/span>(<\/span>key,<\/span> data,<\/span> ttl =<\/span> 3600000<\/span><\/span>)<\/span> {<\/span>
\n const<\/span> item =<\/span> {<\/span>
\n data,<\/span>
\n expiry<\/span>:<\/span> Date.<\/span>now<\/span>(<\/span>)<\/span> +<\/span> ttl
\n }<\/span>;<\/span>
\n localStorage.<\/span>setItem<\/span>(<\/span>key,<\/span> JSON<\/span>.<\/span>stringify<\/span>(<\/span>item)<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

function<\/span> getCache<\/span>(<\/span>key<\/span>)<\/span> {<\/span>
\n const<\/span> itemStr =<\/span> localStorage.<\/span>getItem<\/span>(<\/span>key)<\/span>;<\/span>
\n if<\/span> (<\/span>!<\/span>itemStr)<\/span> return<\/span> null<\/span>;<\/span><\/p>\n

const<\/span> item =<\/span> JSON<\/span>.<\/span>parse<\/span>(<\/span>itemStr)<\/span>;<\/span><\/p>\n

if<\/span> (<\/span>Date.<\/span>now<\/span>(<\/span>)<\/span> ><\/span> item.<\/span>expiry)<\/span> {<\/span>
\n localStorage.<\/span>removeItem<\/span>(<\/span>key)<\/span>;<\/span>
\n return<\/span> null<\/span>;<\/span>
\n }<\/span><\/p>\n

return<\/span> item.<\/span>data;<\/span>
\n}<\/span><\/p>\n

\/\/ \u5c01\u88c5fetch<\/span>
\nasync<\/span> function<\/span> fetchWithLocalStorage<\/span>(<\/span>url,<\/span> ttl =<\/span> 3600000<\/span><\/span>)<\/span> {<\/span>
\n const<\/span> cached =<\/span> getCache<\/span>(<\/span>url)<\/span>;<\/span>
\n if<\/span> (<\/span>cached)<\/span> {<\/span>
\n return<\/span> cached;<\/span>
\n }<\/span><\/p>\n

const<\/span> data =<\/span> await<\/span> fetch<\/span>(<\/span>url)<\/span>.<\/span>then<\/span>(<\/span>r<\/span> =><\/span> r.<\/span>json<\/span>(<\/span>)<\/span>)<\/span>;<\/span>
\n setCache<\/span>(<\/span>url,<\/span> data,<\/span> ttl)<\/span>;<\/span>
\n return<\/span> data;<\/span>
\n}<\/span><\/p>\n

\/\/ \u4f7f\u7528<\/span>
\nconst<\/span> userData =<\/span> await<\/span> fetchWithLocalStorage<\/span>(<\/span>'\/api\/user'<\/span>,<\/span> 30<\/span> *<\/span> 60<\/span> *<\/span> 1000<\/span>)<\/span>;<\/span> \/\/ 30\u5206\u949f<\/span><\/p>\n

5.2.3 Service Worker\u7f13\u5b58<\/h5>\n

\/\/ sw.js（Service Worker）<\/span>
\nconst<\/span> CACHE_NAME<\/span> =<\/span> 'v1'<\/span>;<\/span>
\nconst<\/span> urlsToCache =<\/span> [<\/span>
\n '\/'<\/span>,<\/span>
\n '\/styles\/main.css'<\/span>,<\/span>
\n '\/scripts\/app.js'<\/span>
\n]<\/span>;<\/span><\/p>\n

\/\/ \u5b89\u88c5\u65f6\u7f13\u5b58\u8d44\u6e90<\/span>
\nself.<\/span>addEventListener<\/span>(<\/span>'install'<\/span>,<\/span> event<\/span> =><\/span> {<\/span>
\n event.<\/span>waitUntil<\/span>(<\/span>
\n caches.<\/span>open<\/span>(<\/span>CACHE_NAME<\/span>)<\/span>
\n .<\/span>then<\/span>(<\/span>cache<\/span> =><\/span> cache.<\/span>addAll<\/span>(<\/span>urlsToCache)<\/span>)<\/span>
\n )<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u62e6\u622a\u8bf7\u6c42<\/span>
\nself.<\/span>addEventListener<\/span>(<\/span>'fetch'<\/span>,<\/span> event<\/span> =><\/span> {<\/span>
\n event.<\/span>respondWith<\/span>(<\/span>
\n caches.<\/span>match<\/span>(<\/span>event.<\/span>request)<\/span>
\n .<\/span>then<\/span>(<\/span>response<\/span> =><\/span> {<\/span>
\n \/\/ \u7f13\u5b58\u547d\u4e2d：\u8fd4\u56de\u7f13\u5b58<\/span>
\n if<\/span> (<\/span>response)<\/span> {<\/span>
\n return<\/span> response;<\/span>
\n }<\/span><\/p>\n

\/\/ \u7f13\u5b58\u672a\u547d\u4e2d：\u53d1\u8d77\u8bf7\u6c42<\/span>
\n return<\/span> fetch<\/span>(<\/span>event.<\/span>request)<\/span>.<\/span>then<\/span>(<\/span>response<\/span> =><\/span> {<\/span>
\n \/\/ \u7f13\u5b58\u65b0\u8bf7\u6c42<\/span>
\n if<\/span> (<\/span>response.<\/span>status ===<\/span> 200<\/span>)<\/span> {<\/span>
\n const<\/span> responseClone =<\/span> response.<\/span>clone<\/span>(<\/span>)<\/span>;<\/span>
\n caches.<\/span>open<\/span>(<\/span>CACHE_NAME<\/span>)<\/span>.<\/span>then<\/span>(<\/span>cache<\/span> =><\/span> {<\/span>
\n cache.<\/span>put<\/span>(<\/span>event.<\/span>request,<\/span> responseClone)<\/span>;<\/span>
\n }<\/span>)<\/span>;<\/span>
\n }<\/span>
\n return<\/span> response;<\/span>
\n }<\/span>)<\/span>;<\/span>
\n }<\/span>)<\/span>
\n )<\/span>;<\/span>
\n}<\/span>)<\/span>;<\/span><\/p>\n

\/\/ \u6ce8\u518cService Worker<\/span>
\nif<\/span> (<\/span>'serviceWorker'<\/span> in<\/span> navigator)<\/span> {<\/span>
\n navigator.<\/span>serviceWorker.<\/span>register<\/span>(<\/span>'\/sw.js'<\/span>)<\/span>;<\/span>
\n}<\/span><\/p>\n

\n

5.3 \u6570\u636e\u9884\u53d6<\/h4>\n

\/\/ React Query\u793a\u4f8b<\/span>
\nimport<\/span> {<\/span> useQuery }<\/span> from<\/span> 'react-query'<\/span>;<\/span><\/p>\n

function<\/span> ProductList<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> {<\/span> data<\/span>:<\/span> products }<\/span> =<\/span> useQuery<\/span>(<\/span>'products'<\/span>,<\/span> fetchProducts,<\/span> {<\/span>
\n staleTime<\/span>:<\/span> 5<\/span> *<\/span> 60<\/span> *<\/span> 1000<\/span>,<\/span> \/\/ 5\u5206\u949f\u5185\u8ba4\u4e3a\u6570\u636e\u662f\u65b0\u9c9c\u7684<\/span>
\n cacheTime<\/span>:<\/span> 30<\/span> *<\/span> 60<\/span> *<\/span> 1000<\/span>,<\/span> \/\/ \u7f13\u5b5830\u5206\u949f<\/span>
\n refetchOnWindowFocus<\/span>:<\/span> false<\/span> \/\/ \u7a97\u53e3\u805a\u7126\u65f6\u4e0d\u91cd\u65b0\u8bf7\u6c42<\/span>
\n }<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> <<\/span>div><\/span>{<\/span>\/* \u6e32\u67d3\u4ea7\u54c1\u5217\u8868 *\/<\/span>}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>
\n}<\/span><\/p>\n

\/\/ SWR\u793a\u4f8b<\/span>
\nimport<\/span> useSWR from<\/span> 'swr'<\/span>;<\/span><\/p>\n

function<\/span> Profile<\/span>(<\/span>)<\/span> {<\/span>
\n const<\/span> {<\/span> data,<\/span> error }<\/span> =<\/span> useSWR<\/span>(<\/span>'\/api\/user'<\/span>,<\/span> fetcher,<\/span> {<\/span>
\n revalidateOnFocus<\/span>:<\/span> false<\/span>,<\/span>
\n dedupingInterval<\/span>:<\/span> 60000<\/span> \/\/ 60\u79d2\u5185\u76f8\u540c\u8bf7\u6c42\u8fd4\u56de\u7f13\u5b58<\/span>
\n }<\/span>)<\/span>;<\/span><\/p>\n

return<\/span> <<\/span>div><\/span>{<\/span>data.<\/span>name}<\/span><<\/span>\/<\/span>div><\/span>;<\/span>
\n}<\/span><\/p>\n

\n

\u516d\u3001\u5b9e\u6218\u6848\u4f8b<\/h3>\n

6.1 \u6848\u4f8b\u56de\u987e<\/h4>\n

\u4f18\u5316\u76ee\u6807：
\n– \u8bf7\u6c42\u6570\u91cf：127\u4e2a \u2192 <30\u4e2a
\n– \u9875\u9762\u5927\u5c0f：15.2 MB \u2192 <2 MB
\n– \u52a0\u8f7d\u65f6\u95f4：8\u79d2 \u2192 <2\u79d2<\/p>\n

6.2 \u4f18\u5316\u5b9e\u65bd<\/h4>\n

\u9636\u6bb51：\u51cf\u5c11\u8bf7\u6c42\u6570\u91cf（127 \u2192 35）<\/h5>\n

1. \u56fe\u7247\u61d2\u52a0\u8f7d
\n – \u9996\u5c4f\u5916\u7684\u56fe\u7247：53\u4e2a \u2192 0\u4e2a（\u6eda\u52a8\u65f6\u52a0\u8f7d）
\n – \u8282\u7701\u8bf7\u6c42：53\u4e2a<\/p>\n

2. \u8def\u7531\u61d2\u52a0\u8f7d
\n – \u975e\u5f53\u524d\u9875\u9762\u7ec4\u4ef6：15\u4e2a \u2192 0\u4e2a
\n – \u8282\u7701\u8bf7\u6c42：15\u4e2a<\/p>\n

3. \u63a5\u53e3\u5408\u5e76
\n – \u5546\u54c1\u8be6\u60c5\u8bf7\u6c42：20\u4e2a \u2192 1\u4e2a\u6279\u91cf\u63a5\u53e3
\n – \u8282\u7701\u8bf7\u6c42：19\u4e2a<\/p>\n

4. \u96ea\u78a7\u56fe
\n – \u5c0f\u56fe\u6807：8\u4e2a \u2192 1\u4e2asprite
\n – \u8282\u7701\u8bf7\u6c42：7\u4e2a<\/p>\n

\u603b\u8ba1：127 \u2192 33\u4e2a\u8bf7\u6c42<\/p>\n

\u9636\u6bb52：\u51cf\u5c0f\u8bf7\u6c42\u4f53\u79ef（15.2 MB \u2192 1.8 MB）<\/h5>\n

1. API\u6570\u636e\u5206\u9875
\n – \u5546\u54c1\u5217\u8868：3.2 MB (2000\u6761) \u2192 100 KB (20\u6761)
\n – \u8282\u7701：3.1 MB<\/p>\n

2. \u56fe\u7247\u4f18\u5316
\n – \u538b\u7f29 + WebP：9.5 MB \u2192 1.2 MB
\n – \u8282\u7701：8.3 MB<\/p>\n

3. JS Bundle\u4f18\u5316
\n – Tree Shaking + \u4ee3\u7801\u5206\u5272：2.5 MB \u2192 600 KB
\n – \u8282\u7701：1.9 MB<\/p>\n

4. Gzip\u538b\u7f29
\n – \u6587\u672c\u8d44\u6e90\u538b\u7f29：\u5269\u4f591.8 MB \u2192 500 KB
\n – \u8282\u7701：1.3 MB<\/p>\n

\u603b\u8ba1：15.2 MB \u2192 1.8 MB（\u672a\u538b\u7f29）\u2192 800 KB（Gzip\u540e）<\/p>\n

\u9636\u6bb53：\u63d0\u5347\u8bf7\u6c42\u901f\u5ea6<\/h5>\n

1. \u542f\u7528CDN
\n – \u9759\u6001\u8d44\u6e90\u52a0\u8f7d\u65f6\u95f4：500ms \u2192 50ms
\n – \u63d0\u5347：90%<\/p>\n

2. \u542f\u7528HTTP\/2
\n – \u5e76\u53d1\u9650\u5236：6\u4e2a \u2192 \u65e0\u9650\u5236
\n – \u51cf\u5c11\u961f\u5217\u7b49\u5f85：300ms<\/p>\n

3. \u9884\u8fde\u63a5API\u57df\u540d
\n <link rel="preconnect" href="https:\/\/api.example.com">
\n – \u8282\u7701\u8fde\u63a5\u65f6\u95f4：100ms<\/p>\n

4. \u8bf7\u6c42\u5e76\u884c\u5316
\n – \u4e32\u884c\u8bf7\u6c42：900ms \u2192 \u5e76\u884c：400ms
\n – \u8282\u7701：500ms<\/p>\n

\u9636\u6bb54：\u7f13\u5b58\u7b56\u7565<\/h5>\n

1. \u5f3a\u7f13\u5b58（\u9759\u6001\u8d44\u6e90）
\n – JS\/CSS\/\u56fe\u7247：Cache-Control: max-age=31536000
\n – \u4e8c\u6b21\u8bbf\u95ee：0ms（\u4ece\u7f13\u5b58）<\/p>\n

2. API\u7f13\u5b58（React Query）
\n – \u7528\u6237\u4fe1\u606f：\u7f13\u5b585\u5206\u949f
\n – \u5546\u54c1\u5206\u7c7b：\u7f13\u5b5830\u5206\u949f
\n – \u51cf\u5c11\u91cd\u590d\u8bf7\u6c42：60%<\/p>\n

3. Service Worker
\n – \u79bb\u7ebf\u8bbf\u95ee\u652f\u6301
\n – \u79d2\u5f00\u4f53\u9a8c<\/p>\n

\n

6.3 \u4f18\u5316\u6210\u679c<\/h4>\n

\u6700\u7ec8\u6548\u679c\u5bf9\u6bd4：
\n\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u252c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510
\n\u2502 \u6307\u6807 \u2502 \u4f18\u5316\u524d \u2502 \u4f18\u5316\u540e \u2502 \u63d0\u5347 \u2502
\n\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u253c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524
\n\u2502 \u8bf7\u6c42\u6570\u91cf \u2502 127\u4e2a \u2502 33\u4e2a \u2502 74% \u2705 \u2502
\n\u2502 \u9996\u6b21\u52a0\u8f7d\u5927\u5c0f \u2502 15.2 MB \u2502 1.8 MB \u2502 88% \u2705 \u2502
\n\u2502 Gzip\u540e\u5927\u5c0f \u2502 3.5 MB \u2502 800 KB \u2502 77% \u2705 \u2502
\n\u2502 \u52a0\u8f7d\u65f6\u95f4 \u2502 8.0s \u2502 1.6s \u2502 80% \u2705 \u2502
\n\u2502 FCP \u2502 4.2s \u2502 0.9s \u2502 79% \u2705 \u2502
\n\u2502 LCP \u2502 8.1s \u2502 1.8s \u2502 78% \u2705 \u2502
\n\u2502 Lighthouse \u2502 32\u5206 \u2502 92\u5206 \u2502 +60\u5206\u2705 \u2502
\n\u2514\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2534\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2518<\/p>\n

\u4e8c\u6b21\u8bbf\u95ee（\u6709\u7f13\u5b58）：
\n– \u52a0\u8f7d\u65f6\u95f4：1.6s \u2192 0.3s
\n– \u8bf7\u6c42\u6570\u91cf：33\u4e2a \u2192 5\u4e2a（\u4ec5API\u8bf7\u6c42）<\/p>\n

\n

\u4e03\u3001\u603b\u7ed3<\/h3>\n

7.1 \u4f18\u5316\u6e05\u5355<\/h4>\n

\u2611\ufe0f \u51cf\u5c11\u8bf7\u6c42\u6570\u91cf
\n – [ ] \u9759\u6001\u8d44\u6e90\u5408\u5e76（\u96ea\u78a7\u56fe\u3001Bundle）
\n – [ ] \u63a5\u53e3\u5408\u5e76（\u6279\u91cf\u3001GraphQL\u3001BFF）
\n – [ ] \u61d2\u52a0\u8f7d（\u8def\u7531\u3001\u7ec4\u4ef6\u3001\u56fe\u7247）
\n – [ ] \u9884\u52a0\u8f7d（preload\u3001prefetch\u3001dns-prefetch）<\/p>\n

\u2611\ufe0f \u51cf\u5c0f\u8bf7\u6c42\u4f53\u79ef
\n – [ ] \u6570\u636e\u538b\u7f29（Gzip\u3001Brotli）
\n – [ ] \u56fe\u7247\u4f18\u5316（\u538b\u7f29\u3001WebP\u3001AVIF）
\n – [ ] \u6570\u636e\u88c1\u526a（\u5b57\u6bb5\u8fc7\u6ee4\u3001\u5206\u9875）
\n – [ ] Tree Shaking（\u79fb\u9664\u672a\u4f7f\u7528\u4ee3\u7801）<\/p>\n

\u2611\ufe0f \u63d0\u5347\u8bf7\u6c42\u901f\u5ea6
\n – [ ] CDN\u52a0\u901f
\n – [ ] HTTP\/2
\n – [ ] \u8bf7\u6c42\u5e76\u884c\u5316
\n – [ ] \u57df\u540d\u6536\u655b<\/p>\n

\u2611\ufe0f \u7f13\u5b58\u7b56\u7565
\n – [ ] HTTP\u7f13\u5b58（\u5f3a\u7f13\u5b58\u3001\u534f\u5546\u7f13\u5b58）
\n – [ ] \u524d\u7aef\u7f13\u5b58（Memory\u3001LocalStorage）
\n – [ ] Service Worker
\n – [ ] \u6570\u636e\u9884\u53d6<\/p>\n

7.2 \u4f18\u5316\u4f18\u5148\u7ea7<\/h4>\n

🔴 P0\u7ea7（\u7acb\u5373\u6267\u884c）：
\n1. API\u5206\u9875（\u6570\u636e\u91cf\u5927 \u2192 \u9996\u5c4f\u6162）
\n2. \u56fe\u7247\u61d2\u52a0\u8f7d（\u8bf7\u6c42\u591a \u2192 \u5e76\u53d1\u963b\u585e）
\n3. \u8def\u7531\u61d2\u52a0\u8f7d（Bundle\u5927 \u2192 \u89e3\u6790\u6162）<\/p>\n

\u26a0\ufe0f P1\u7ea7（\u91cd\u8981）：
\n4. \u56fe\u7247\u538b\u7f29 + WebP
\n5. \u542f\u7528Gzip\/Brotli
\n6. \u542f\u7528CDN<\/p>\n

\u2b55 P2\u7ea7（\u4f18\u5316）：
\n7. \u63a5\u53e3\u5408\u5e76（GraphQL\/BFF）
\n8. HTTP\/2
\n9. Service Worker<\/p>\n","protected":false},"excerpt":{"rendered":"

\u4e00\u3001\u8bf7\u6c42\u4f18\u5316\u6838\u5fc3\u601d\u8def
\n1.1 \u4f18\u5316\u56db\u539f\u5219
\n\u8bf7\u6c42\u4f18\u5316\u91d1\u5b57\u5854：\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502 \u4e0d\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6700\u4f18（\u7f13\u5b58\u3001\u9884\u52a0\u8f7d）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5c11\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6b21\u4f18（\u5408\u5e76\u3001\u61d2\u52a0\u8f7d）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5c0f\u8bf7\u6c42 \u2502 \u2190 \u4f18\u5316（\u538b\u7f29\u3001\u88c1\u526a）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5feb\u8bf7\u6c42 \u2502 \u2190 \u57fa\u7840&#xff08<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[87,56],"topic":[],"class_list":["post-64182","post","type-post","status-publish","format-standard","hentry","category-server","tag-87","tag-56"],"yoast_head":"\n\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.wsisp.com\/helps\/64182.html\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"og:description\" content=\"\u4e00\u3001\u8bf7\u6c42\u4f18\u5316\u6838\u5fc3\u601d\u8def 1.1 \u4f18\u5316\u56db\u539f\u5219 \u8bf7\u6c42\u4f18\u5316\u91d1\u5b57\u5854：\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502 \u4e0d\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6700\u4f18（\u7f13\u5b58\u3001\u9884\u52a0\u8f7d）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5c11\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6b21\u4f18（\u5408\u5e76\u3001\u61d2\u52a0\u8f7d）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5c0f\u8bf7\u6c42 \u2502 \u2190 \u4f18\u5316（\u538b\u7f29\u3001\u88c1\u526a）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5feb\u8bf7\u6c42 \u2502 \u2190 \u57fa\u7840&#xff08\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.wsisp.com\/helps\/64182.html\" \/>\n<meta property=\"og:site_name\" content=\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\" \/>\n<meta property=\"article:published_time\" content=\"2026-01-22T14:48:34+00:00\" \/>\n<meta name=\"author\" content=\"admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/64182.html\",\"url\":\"https:\/\/www.wsisp.com\/helps\/64182.html\",\"name\":\"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"isPartOf\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\"},\"datePublished\":\"2026-01-22T14:48:34+00:00\",\"dateModified\":\"2026-01-22T14:48:34+00:00\",\"author\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.wsisp.com\/helps\/64182.html#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.wsisp.com\/helps\/64182.html\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/64182.html#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.wsisp.com\/helps\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#website\",\"url\":\"https:\/\/www.wsisp.com\/helps\/\",\"name\":\"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3\",\"description\":\"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41\",\"name\":\"admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"contentUrl\":\"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery\",\"caption\":\"admin\"},\"sameAs\":[\"http:\/\/wp.wsisp.com\"],\"url\":\"https:\/\/www.wsisp.com\/helps\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.wsisp.com\/helps\/64182.html","og_locale":"zh_CN","og_type":"article","og_title":"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","og_description":"\u4e00\u3001\u8bf7\u6c42\u4f18\u5316\u6838\u5fc3\u601d\u8def 1.1 \u4f18\u5316\u56db\u539f\u5219 \u8bf7\u6c42\u4f18\u5316\u91d1\u5b57\u5854：\u250c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2510\u2502 \u4e0d\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6700\u4f18（\u7f13\u5b58\u3001\u9884\u52a0\u8f7d）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5c11\u53d1\u8bf7\u6c42 \u2502 \u2190 \u6b21\u4f18（\u5408\u5e76\u3001\u61d2\u52a0\u8f7d）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5c0f\u8bf7\u6c42 \u2502 \u2190 \u4f18\u5316（\u538b\u7f29\u3001\u88c1\u526a）\u251c\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2524\u2502 \u5feb\u8bf7\u6c42 \u2502 \u2190 \u57fa\u7840&#xff08","og_url":"https:\/\/www.wsisp.com\/helps\/64182.html","og_site_name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","article_published_time":"2026-01-22T14:48:34+00:00","author":"admin","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"admin","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"14 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.wsisp.com\/helps\/64182.html","url":"https:\/\/www.wsisp.com\/helps\/64182.html","name":"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565 - \u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","isPartOf":{"@id":"https:\/\/www.wsisp.com\/helps\/#website"},"datePublished":"2026-01-22T14:48:34+00:00","dateModified":"2026-01-22T14:48:34+00:00","author":{"@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41"},"breadcrumb":{"@id":"https:\/\/www.wsisp.com\/helps\/64182.html#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.wsisp.com\/helps\/64182.html"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.wsisp.com\/helps\/64182.html#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.wsisp.com\/helps"},{"@type":"ListItem","position":2,"name":"\u524d\u7aef\u6027\u80fd\u4f18\u5316\u7cfb\u5217\uff08\u4e8c\uff09\uff1a\u8bf7\u6c42\u4f18\u5316\u7b56\u7565"}]},{"@type":"WebSite","@id":"https:\/\/www.wsisp.com\/helps\/#website","url":"https:\/\/www.wsisp.com\/helps\/","name":"\u7f51\u7855\u4e92\u8054\u5e2e\u52a9\u4e2d\u5fc3","description":"\u9999\u6e2f\u670d\u52a1\u5668_\u9999\u6e2f\u4e91\u670d\u52a1\u5668\u8d44\u8baf_\u670d\u52a1\u5668\u5e2e\u52a9\u6587\u6863_\u670d\u52a1\u5668\u6559\u7a0b","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.wsisp.com\/helps\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/358e386c577a3ab51c4493330a20ad41","name":"admin","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.wsisp.com\/helps\/#\/schema\/person\/image\/","url":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","contentUrl":"https:\/\/gravatar.wp-china-yes.net\/avatar\/?s=96&d=mystery","caption":"admin"},"sameAs":["http:\/\/wp.wsisp.com"],"url":"https:\/\/www.wsisp.com\/helps\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/64182","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/comments?post=64182"}],"version-history":[{"count":0,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/posts\/64182\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/media?parent=64182"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/categories?post=64182"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/tags?post=64182"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.wsisp.com\/helps\/wp-json\/wp\/v2\/topic?post=64182"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}