{"id":2748,"date":"2022-10-26T00:08:05","date_gmt":"2022-10-25T16:08:05","guid":{"rendered":"https:\/\/jimmyswebnote.com\/?p=2748"},"modified":"2022-10-26T00:13:27","modified_gmt":"2022-10-25T16:13:27","slug":"next-js-compiler","status":"publish","type":"post","link":"https:\/\/jimmyswebnote.com\/next-js-compiler\/","title":{"rendered":"Next.js Compiler \u4ecb\u7d39"},"content":{"rendered":"\n<p>Next.js compiler \u662f\u8b93 Next.js \u6548\u80fd\u5f37\u5927\u7684\u91cd\u8981\u539f\u56e0\u4e4b\u4e00\u3002\u5728\u4e86\u89e3 Next.js compiler \u4e4b\u524d\uff0c\u5148\u4f86\u8ac7\u8ac7\u5f9e\u958b\u767c\u74b0\u5883\u5230\u90e8\u7f72\u7684\u56db\u500b\u91cd\u8981\u6d41\u7a0b\uff0c\u4e86\u89e3\u9019\u4e9b\u6d41\u7a0b\u624d\u80fd\u5920\u77e5\u9053 Next.js compiler \u505a\u4e86\u54ea\u4e9b\u4e8b\u60c5\u3002<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 counter-hierarchy ez-toc-counter ez-toc-grey ez-toc-container-direction\">\n<p class=\"ez-toc-title\">Table of Contents<\/p>\n<label for=\"ez-toc-cssicon-toggle-item-6633520f14ad6\" class=\"ez-toc-cssicon-toggle-label\"><span class=\"\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #999;color:#999\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #999;color:#999\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-6633520f14ad6\"  aria-label=\"Toggle\" \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#1_%E5%BE%9E%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83%E5%88%B0%E9%83%A8%E7%BD%B2\" title=\"1. \u5f9e\u958b\u767c\u74b0\u5883\u5230\u90e8\u7f72\">1. \u5f9e\u958b\u767c\u74b0\u5883\u5230\u90e8\u7f72<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#11_Compile_%E2%80%93_%E7%B7%A8%E8%AD%AF\" title=\"1.1 Compile &#8211; \u7de8\u8b6f\">1.1 Compile &#8211; \u7de8\u8b6f<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#12_Minify_%E2%80%93_%E6%A5%B5%E7%B0%A1%E5%8C%96\" title=\"1.2 Minify &#8211; \u6975\u7c21\u5316\">1.2 Minify &#8211; \u6975\u7c21\u5316<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#13_Bundle_%E2%80%93_%E6%89%93%E5%8C%85\" title=\"1.3 Bundle &#8211; \u6253\u5305\">1.3 Bundle &#8211; \u6253\u5305<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#14_Code_Split\" title=\"1.4 Code Split\">1.4 Code Split<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#2_Nextjs_Compiler\" title=\"2. Next.js Compiler\">2. Next.js Compiler<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#21_%E7%89%B9%E6%80%A7\" title=\"2.1 \u7279\u6027\">2.1 \u7279\u6027<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#22_%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD\" title=\"2.2 \u4e3b\u8981\u529f\u80fd\">2.2 \u4e3b\u8981\u529f\u80fd<\/a><ul class='ez-toc-list-level-4' ><li class='ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#221_Styled_Components\" title=\"2.2.1 Styled Components\">2.2.1 Styled Components<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#222_Jest\" title=\"2.2.2 Jest\">2.2.2 Jest<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#223_Remove_React_Properties\" title=\"2.2.3 Remove React Properties\">2.2.3 Remove React Properties<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#224_Remove_Console\" title=\"2.2.4 Remove Console\">2.2.4 Remove Console<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-4'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#225_Minification\" title=\"2.2.5 Minification\">2.2.5 Minification<\/a><\/li><\/ul><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/#%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99\" title=\"\u53c3\u8003\u8cc7\u6599\">\u53c3\u8003\u8cc7\u6599<\/a><\/li><\/ul><\/nav><\/div>\n<h2><span class=\"ez-toc-section\" id=\"1_%E5%BE%9E%E9%96%8B%E7%99%BC%E7%92%B0%E5%A2%83%E5%88%B0%E9%83%A8%E7%BD%B2\"><\/span>1. \u5f9e\u958b\u767c\u74b0\u5883\u5230\u90e8\u7f72<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>\u7576\u6211\u5011\u5728\u958b\u767c\u74b0\u5883\u5beb\u5b8c code \u5f8c\uff0c\u9084\u9700\u8981\u5c07 code \u7d93\u904e\u4e00\u4e9b\u8f49\u63db\uff0c\u6700\u5f8c\u624d\u5c07\u7a0b\u5f0f\u78bc\u90e8\u7f72\u5230\u76ee\u6a19\u6a5f\u5668\u4e0a\u3002\u9019\u4e9b\u6b65\u9a5f\u5206\u5225\u70ba\uff1acompile, bundle, minify, code split<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"11_Compile_%E2%80%93_%E7%B7%A8%E8%AD%AF\"><\/span>1.1 Compile &#8211; \u7de8\u8b6f<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u901a\u5e38\u5728\u958b\u767c\u74b0\u5883\u4e2d\uff0c\u6211\u5011\u4e0d\u592a\u6703\u76f4\u63a5\u5beb\u539f\u751f\u7684 JavaScript \u6216\u662f CSS\uff0c\u4ee5 React \u70ba\u4f8b\uff0c\u6211\u5011\u6703\u5728 component \u88e1\u9762\u4f7f\u7528 JSX \u7684\u8a9e\u6cd5\uff0c\u751a\u81f3\u4f7f\u7528 TypeScript \u958b\u767c\u4f86\u52a0\u5f37 application \u7684\u7dad\u8b77\u6027\u3002\u7136\u800c\u700f\u89bd\u5668\u6c38\u9060\u53ea\u8a8d\u8b58\u4e09\u7a2e\u7a0b\u5f0f\u8a9e\u8a00\uff1aHTML, CSS, JavaScript\uff0c\u4e5f\u56e0\u6b64\u5f9e\u958b\u767c\u74b0\u5883\u5230\u90e8\u7f72\u7684\u7b2c\u4e00\u500b\u968e\u6bb5\uff0c\u5c31\u662f\u8981\u5c07\u5404\u5f0f\u5404\u6a23\u700f\u89bd\u5668\u4e0d\u652f\u63f4\u7684\u8a9e\u6cd5\uff0c\u8f49\u63db\u6210\u700f\u89bd\u5668\u770b\u5f97\u61c2\u7684 code\uff0c\u9019\u500b\u904e\u7a0b\u7a31\u4f5c compile\u3002\u4ee5\u4e0b\u8209 JSX \u70ba\u4f8b\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/next.js-compiling.png\"><img loading=\"lazy\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/next.js-compiling-1024x485.png\" alt=\"Next.js compiler\" class=\"wp-image-2749\" width=\"768\" height=\"364\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/next.js-compiling-1024x485.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/next.js-compiling-300x142.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/next.js-compiling-768x364.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/next.js-compiling.png 1360w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><figcaption>\u5716\u7247\u4f86\u6e90\uff1a<a href=\"https:\/\/nextjs.org\/learn\/foundations\/how-nextjs-works\/compiling\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/nextjs.org\/learn\/foundations\/how-nextjs-works\/compiling\" rel=\"noreferrer noopener\">Next.js \u5b98\u7db2<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"12_Minify_%E2%80%93_%E6%A5%B5%E7%B0%A1%E5%8C%96\"><\/span>1.2 Minify &#8211; \u6975\u7c21\u5316<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u5728\u958b\u767c\u74b0\u5883\u4e2d\uff0c\u5beb code \u7684\u539f\u5247\u662f\u57fa\u65bc\u6613\u8b80\u6027\u53ca\u53ef\u7dad\u8b77\u6027\uff0c\u7136\u800c\u5728\u771f\u5be6\u74b0\u5883\u4e2d\uff0c\u67d0\u4e9b code \u53ef\u80fd\u4e0d\u662f\u90a3\u9ebc\u5fc5\u8981\uff0cex: \u7a7a\u767d\u3001\u63db\u884c\u3001\u7e2e\u6392\u3001\u8a3b\u89e3\u7b49\u7b49\u3002<\/p>\n\n\n\n<p>\u6240\u8b02\u7684 minify \u662f\u6307\u5728\u4e0d\u5f71\u97ff code \u7684\u529f\u80fd\u4e0b\uff0c\u5c07 code \u6975\u7c21\u5316\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/minifying.png\"><img loading=\"lazy\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/minifying-1024x485.png\" alt=\"Next.js compiler\" class=\"wp-image-2750\" width=\"768\" height=\"364\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/minifying-1024x485.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/minifying-300x142.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/minifying-768x364.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/minifying.png 1360w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><figcaption>\u5716\u7247\u4f86\u6e90\uff1a<a href=\"https:\/\/nextjs.org\/learn\/foundations\/how-nextjs-works\/minifying\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/nextjs.org\/learn\/foundations\/how-nextjs-works\/minifying\" rel=\"noreferrer noopener\">Next.js \u5b98\u7db2<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p>\u7d93\u904e minify \u5f8c\u7684 code \u6709\u4ee5\u4e0b\u512a\u9ede\uff1a<\/p>\n\n\n\n<ul><li>response \u7684\u6642\u9593\u6e1b\u5c11<\/li><li>\u50b3\u8f38\u7684\u8cc7\u6599\u6e1b\u5c11\uff0c\u56e0\u6b64\u53ef\u4ee5\u6e1b\u5c11\u983b\u5bec<\/li><li>Code \u8b8a\u5f97\u4e0d\u6613\u8b80\uff0c\u589e\u52a0\u5b89\u5168\u6027\uff08\u4e0d\u904e\u9084\u662f\u53ef\u4ee5\u900f\u904e\u67d0\u4e9b\u5de5\u5177\u628a code \u7684\u7d50\u69cb\u9006\u63a8\u56de\u4f86\uff09<\/li><\/ul>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"13_Bundle_%E2%80%93_%E6%89%93%E5%8C%85\"><\/span>1.3 Bundle &#8211; \u6253\u5305<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u5728\u958b\u767c\u74b0\u5883\u4e2d\uff0c\u6211\u5011\u53ef\u80fd\u6703\u5c07 code \u5206\u6210 module, components, functions \u7b49\u7b49\uff0c\u9700\u8981\u7684\u6642\u5019\u518d import \u9032\u6a94\u6848\u4ee5\u589e\u52a0\u53ef\u7dad\u8b77\u6027\u3002\u7136\u800c\u9019\u6a23\u7684\u67b6\u69cb\u4e5f\u6703\u589e\u52a0 code \u4e4b\u9593\u7684<a href=\"https:\/\/zh.wikipedia.org\/wiki\/%E8%80%A6%E5%90%88%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%B8)\" data-type=\"URL\" data-id=\"https:\/\/zh.wikipedia.org\/wiki\/%E8%80%A6%E5%90%88%E6%80%A7_(%E8%A8%88%E7%AE%97%E6%A9%9F%E7%A7%91%E5%AD%B8)\" target=\"_blank\" rel=\"noreferrer noopener\">\u8026\u5408\u6027<\/a>\u3002<\/p>\n\n\n\n<p>\u6240\u8b02\u7684 bundle \u662f\u900f\u904e\u67d0\u4e9b\u5de5\u5177\uff0c\u6e1b\u5c11\u6574\u500b application \u7684\u6a94\u6848\u6578\u91cf\u4ee5\u53ca code \u7684\u76f8\u4f9d\u6027\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/webpack-bundle.png\"><img loading=\"lazy\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/webpack-bundle-1024x496.png\" alt=\"Next.js compiler\" class=\"wp-image-2751\" width=\"768\" height=\"372\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/webpack-bundle-1024x496.png 1024w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/webpack-bundle-300x145.png 300w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/webpack-bundle-768x372.png 768w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/webpack-bundle-1536x745.png 1536w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/webpack-bundle-2048x993.png 2048w\" sizes=\"(max-width: 768px) 100vw, 768px\" \/><\/a><figcaption>\u5716\u7247\u4f86\u6e90\uff1a<a href=\"https:\/\/webpack.js.org\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/webpack.js.org\/\" rel=\"noreferrer noopener\">Webpack \u5b98\u7db2<\/a><\/figcaption><\/figure><\/div>\n\n\n\n<p>\u5728 web application \u4e2d\uff0cbundle \u6700\u91cd\u8981\u7684\u76ee\u7684\u662f\u6e1b\u5c11 user \u9020\u8a2a\u7db2\u9801\u6642\u767c\u7684 request \u6578\u91cf\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"14_Code_Split\"><\/span>1.4 Code Split<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>\u96a8\u8457 application \u7684\u529f\u80fd\u589e\u52a0\uff0c\u88ab bundle \u5f8c\u7684\u6a94\u6848\u4e5f\u6703\u8d8a\u4f86\u8d8a\u5927\uff0c\u8209\u4f8b\u4f86\u8aaa\uff0c\u5047\u8a2d\u662f\u7528 Next.js \u6216\u662f React.js \u4f86\u958b\u767c application\uff0c\u96a8\u8457 components \u8d8a\u4f86\u8d8a\u591a\uff0c\u88ab bundle \u904e\u5f8c\u7684\u6a94\u6848\u4e5f\u6703\u8d8a\u4f86\u8d8a\u5927\uff0c\u5982\u679c user \u6bcf\u6b21\u62dc\u8a2a\u7db2\u7ad9\u90fd\u8981\u7b49\u6574\u5305\u88ab bundle \u904e\u7684\u6a94\u6848\u50b3\u5230\u524d\u7aef\u5f8c\u518d\u57f7\u884c\uff0c\u5c31\u6703\u5c31\u6703\u628a\u7db2\u7ad9\u7684\u8f09\u5165\u6642\u9593\u7d66\u62c9\u9577\u3002Code split \u9019\u500b\u904e\u7a0b\u5c31\u662f\u5c07\u4f60\u7684 code \u7d66\u5206\u5272\uff0cuser \u9020\u8a2a\u67d0\u500b\u9801\u9762\u6642\uff0c\u53ea\u6703\u8f09\u5165\u8a72\u9801\u9762\u7528\u5f97\u5230\u7684 code\uff0c\u800c\u4e0d\u662f\u6574\u500b\u7db2\u7ad9\u7684 code\uff0c\u85c9\u6b64\u964d\u4f4e\u8f09\u5165\u8a72\u9801\u9762\u7684\u6642\u9593\uff1a<\/p>\n\n\n\n<div class=\"wp-block-image\"><figure class=\"aligncenter size-large is-resized\"><a href=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/code-splitting.png\"><img loading=\"lazy\" src=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/code-splitting.png\" alt=\"Next.js compiler\" class=\"wp-image-2752\" width=\"638\" height=\"359\" srcset=\"https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/code-splitting.png 638w, https:\/\/jimmyswebnote.com\/wp-content\/uploads\/2022\/10\/code-splitting-300x169.png 300w\" sizes=\"(max-width: 638px) 100vw, 638px\" \/><\/a><figcaption>\u5716\u7247\u4f86\u6e90\uff1a<a href=\"https:\/\/www.freecodecamp.org\/news\/code-splitting-with-higher-order-components-4ac8f094b059\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.freecodecamp.org\/news\/code-splitting-with-higher-order-components-4ac8f094b059\/\" rel=\"noreferrer noopener\">Why you should use code splitting with higher order component<\/a>s<\/figcaption><\/figure><\/div>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"2_Nextjs_Compiler\"><\/span>2. Next.js Compiler<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>Next.js \u5728 12 \u7248\u4ee5\u5f8c\u5f15\u9032\u4e86\u5168\u65b0\u7684 compiler\uff0c\u8a72 compiler \u57fa\u672c\u4e0a\u5c31\u662f\u8ca0\u8cac\u8655\u7406\u4ee5\u4e0a 4 \u500b\u904e\u7a0b\u7684\u5de5\u5177\u3002\u8981\u6ce8\u610f\u7684\u662f\uff0c\u5982\u679c\u4f60\u7684\u5c08\u6848\u5df2\u7d93\u5b58\u5728 .babelrc \u6216\u662f babel.config.js \u7684\u8a71\uff0cNext.js \u6703\u9810\u5148\u4f7f\u7528 Babel \u4f5c\u70ba compiler\u3002<\/p>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"21_%E7%89%B9%E6%80%A7\"><\/span>2.1 \u7279\u6027<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul><li>\u7528 Rust \u7de8\u5beb\uff0c\u4ee5\u53ca\u7528 SWC \u958b\u767c\u800c\u6210<\/li><li>Compile \u901f\u5ea6\u6bd4 <a href=\"https:\/\/babeljs.io\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/babeljs.io\/\" rel=\"noreferrer noopener\">Babel<\/a> \u5feb 17 \u500d<\/li><li>Minify \u901f\u5ea6\u6bd4 <a href=\"https:\/\/github.com\/terser\/terser\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/github.com\/terser\/terser\" rel=\"noreferrer noopener\">terser<\/a> \u5feb 7 \u500d<\/li><li>Refresh \u901f\u5ea6\u6bd4\u672a\u5c0e\u5165\u524d\u5feb\u4e86\u5c07\u8fd1 3 \u500d<\/li><li>Build \u7684\u901f\u5ea6\u6bd4\u672a\u5c0e\u5165\u524d\u5feb\u4e86\u5c07\u8fd1 5 \u500d<\/li><\/ul>\n\n\n\n<h3><span class=\"ez-toc-section\" id=\"22_%E4%B8%BB%E8%A6%81%E5%8A%9F%E8%83%BD\"><\/span>2.2 \u4e3b\u8981\u529f\u80fd<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<h4><span class=\"ez-toc-section\" id=\"221_Styled_Components\"><\/span>2.2.1 Styled Components<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>\u5c0e\u5165 babel \u7684 babel-plugin-styled-components\uff0c\u76f8\u95dc\u8a2d\u5b9a\u53ef\u4ee5\u76f4\u63a5\u53c3\u8003 babel \u5957\u4ef6\u7684 <a href=\"https:\/\/styled-components.com\/docs\/tooling#babel-plugin\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/styled-components.com\/docs\/tooling#babel-plugin\" rel=\"noreferrer noopener\">document<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ next.config.js\nmodule.exports = {\n  compiler: {\n    \/\/ see https:\/\/styled-components.com\/docs\/tooling#babel-plugin for more info on the options.\n    styledComponents: boolean | {\n      \/\/ Enabled by default in development, disabled in production to reduce file size,\n      \/\/ setting this will override the default for all environments.\n      displayName?: boolean,\n      \/\/ Enabled by default.\n      ssr?: boolean,\n      \/\/ Enabled by default.\n      fileName?: boolean,\n      \/\/ Empty by default.\n      topLevelImportPaths?: string[],\n      \/\/ Defaults to [\"index\"].\n      meaninglessFileNames?: string[],\n      \/\/ Enabled by default.\n      cssProp?: boolean,\n      \/\/ Empty by default.\n      namespace?: string,\n      \/\/ Not supported yet.\n      minify?: boolean,\n      \/\/ Not supported yet.\n      transpileTemplateLiterals?: boolean,\n      \/\/ Not supported yet.\n      pure?: boolean,\n    },\n  },\n}<\/code><\/pre>\n\n\n\n<h4><span class=\"ez-toc-section\" id=\"222_Jest\"><\/span>2.2.2 Jest<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>Next.js 12 \u7248\u4ee5\u5f8c\uff0c\u5167\u5efa\u652f\u63f4 jest\uff0c\u53ef\u4ee5\u53c3\u8003<a href=\"https:\/\/nextjs.org\/docs\/testing#setting-up-jest-with-the-rust-compiler\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/nextjs.org\/docs\/testing#setting-up-jest-with-the-rust-compiler\" rel=\"noreferrer noopener\">\u5b98\u65b9\u6587\u4ef6<\/a><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ jest.config.js\nconst nextJest = require('next\/jest')\n\nconst createJestConfig = nextJest({\n  \/\/ Provide the path to your Next.js app to load next.config.js and .env files in your test environment\n  dir: '.\/',\n})\n\n\/\/ Add any custom config to be passed to Jest\n\/** @type {import('jest').Config} *\/\nconst customJestConfig = {\n  \/\/ Add more setup options before each test is run\n  \/\/ setupFilesAfterEnv: ['&lt;rootDir>\/jest.setup.js'],\n  \/\/ if using TypeScript with a baseUrl set to the root directory then you need the below for alias' to work\n  moduleDirectories: ['node_modules', '&lt;rootDir>\/'],\n  testEnvironment: 'jest-environment-jsdom',\n}\n\n\/\/ createJestConfig is exported this way to ensure that next\/jest can load the Next.js config which is async\nmodule.exports = createJestConfig(customJestConfig)<\/code><\/pre>\n\n\n\n<h4><span class=\"ez-toc-section\" id=\"223_Remove_React_Properties\"><\/span>2.2.3 Remove React Properties<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>\u7528\u4f86\u79fb\u9664\u7279\u5b9a\u7684 JSX properties\uff0c\u5e38\u7528\u5728\u79fb\u9664\u6e2c\u8a66\u7528\u7684 properties\uff0cex: Cypress \u7684<a href=\"https:\/\/docs.cypress.io\/guides\/references\/best-practices#Selecting-Elements\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/docs.cypress.io\/guides\/references\/best-practices#Selecting-Elements\" rel=\"noreferrer noopener\">\u5b98\u65b9\u6587\u4ef6<\/a>\u5efa\u8b70\u4f7f\u7528 data-* \u4f86\u5e6b\u52a9 E2E \u7684\u6e2c\u8a66\u3002\u5982\u679c\u4e0d\u5e0c\u671b\u5c07\u9019\u4e9b\u6e2c\u8a66\u7528\u7684 properties \u4e0a\u5230 production\uff0c\u5c31\u53ef\u4ee5\u5728 compile \u6642\u5c07\u9019\u4e9b properties \u79fb\u9664\u3002<\/p>\n\n\n\n<p>\u5982\u679c\u5c07 reactRemoveProperties \u8a2d\u6210 true \u7684\u8a71\uff0c\u9810\u8a2d\u6703\u5c07 <code>^data-test<\/code> \u7684 properties \u5168\u90e8\u79fb\u9664\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ next.config.js\nmodule.exports = {\n  compiler: {\n    reactRemoveProperties: true,\n  },\n}<\/code><\/pre>\n\n\n\n<p>\u5982\u679c\u5e0c\u671b\u79fb\u9664\u7279\u5b9a\u683c\u5f0f\u7684 properties\uff0c\u53ef\u4ee5\u76f4\u63a5\u50b3 regular expression\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ next.config.js\nmodule.exports = {\n  compiler: {\n    \/\/ The regexes defined here are processed in Rust so the syntax is different from\n    \/\/ JavaScript `RegExp`s. See https:\/\/docs.rs\/regex.\n    reactRemoveProperties: { properties: ['^data-custom$'] },\n  },\n}<\/code><\/pre>\n\n\n\n<h4><span class=\"ez-toc-section\" id=\"224_Remove_Console\"><\/span>2.2.4 Remove Console<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>\u985e\u4f3c babel \u7684 babel-plugin-transform-remove-console\uff0c\u5c07 removeConsole \u8a2d\u6210 true \u7684\u8a71\uff0c\u9810\u8a2d\u6703\u5c07 console.* \u5168\u90e8\u79fb\u9664\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ next.config.js\nmodule.exports = {\n  compiler: {\n    removeConsole: true,\n  },\n}<\/code><\/pre>\n\n\n\n<p>\u5982\u679c\u5e0c\u671b\u6392\u9664\u67d0\u7a2e console \u7684\u8a71\uff0c\u53ef\u4ee5\u9019\u6a23\u6539\u5beb config:<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ next.config.js\nmodule.exports = {\n  compiler: {\n    removeConsole: {\n      exclude: ['error'],\n    },\n  },\n}<\/code><\/pre>\n\n\n\n<h4><span class=\"ez-toc-section\" id=\"225_Minification\"><\/span>2.2.5 Minification<span class=\"ez-toc-section-end\"><\/span><\/h4>\n\n\n\n<p>\u7528\u4f86 Minify code\uff0c\u6bd4 Terser \u5feb\u4e0a 7 \u500d\u3002<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code lang=\"javascript\" class=\"language-javascript line-numbers\">\/\/ next.config.js\n\nmodule.exports = {\n  swcMinify: true,\n}<\/code><\/pre>\n\n\n\n<h2><span class=\"ez-toc-section\" id=\"%E5%8F%83%E8%80%83%E8%B3%87%E6%96%99\"><\/span>\u53c3\u8003\u8cc7\u6599<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p><a href=\"https:\/\/zh.wikipedia.org\/wiki\/%E6%A5%B5%E7%B0%A1%E5%8C%96\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/zh.wikipedia.org\/wiki\/%E6%A5%B5%E7%B0%A1%E5%8C%96\" rel=\"noreferrer noopener\">\u6975\u7c21\u5316- \u7ef4\u57fa\u767e\u79d1\uff0c\u81ea\u7531\u7684\u767e\u79d1\u5168\u66f8<\/a><br><a href=\"https:\/\/ithelp.ithome.com.tw\/articles\/10268498\" data-type=\"URL\" data-id=\"https:\/\/ithelp.ithome.com.tw\/articles\/10268498\" target=\"_blank\" rel=\"noreferrer noopener\">[\u9435\u4eba\u8cfd Day05] React \u4e2d\u7684 Code splitting\uff08\u4ee3\u78bc\u5206\u96e2\uff09\u65b9\u6cd5<\/a><br><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Code_splitting\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Glossary\/Code_splitting\" rel=\"noreferrer noopener\">Code splitting &#8211; MDN Web Docs Glossary<\/a><br><a href=\"https:\/\/www.freecodecamp.org\/news\/code-splitting-with-higher-order-components-4ac8f094b059\/\" target=\"_blank\" data-type=\"URL\" data-id=\"https:\/\/www.freecodecamp.org\/news\/code-splitting-with-higher-order-components-4ac8f094b059\/\" rel=\"noreferrer noopener\">Why you should use code splitting with higher order components<\/a><br><a href=\"https:\/\/nextjs.org\/learn\/foundations\/how-nextjs-works\" target=\"_blank\" rel=\"noreferrer noopener\">How Next.js Works | Learn Next.js<\/a><br><a href=\"https:\/\/nextjs.org\/docs\/advanced-features\/compiler\" target=\"_blank\" rel=\"noreferrer noopener\">Advanced Features: Next.js Compiler<\/a><\/p>\n\n\n\n\n\n<p>\u5982\u679c\u89ba\u5f97\u6211\u7684\u6587\u7ae0\u6709\u5e6b\u52a9\u7684\u8a71\uff0c\u6b61\u8fce\u5e6b\u6211\u7684\u7c89\u5c08\u6309\u8b9a\u54e6~\u8b1d\u8b1d\u4f60\uff01<br><\/p>\n\n<iframe loading=\"lazy\" src=\"https:\/\/www.facebook.com\/plugins\/page.php?href=https%3A%2F%2Fwww.facebook.com%2Fjimmyswebnote&amp;tabs=timeline&amp;width=340&amp;height=500&amp;small_header=false&amp;adapt_container_width=true&amp;hide_cover=false&amp;show_facepile=true&amp;appId\" width=\"340\" height=\"500\" style=\"border:none;overflow:hidden\" scrolling=\"no\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share\"><\/iframe>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Next.js compiler \u662f\u8b93 Next.js \u6548\u80fd\u5f37\u5927\u7684\u91cd\u8981\u539f\u56e0\u4e4b\u4e00\u3002\u5728\u4e86\u89e3 Next.js compiler \u4e4b\u524d\uff0c\u5148\u4f86\u8ac7\u8ac7\u5f9e\u958b\u767c\u74b0\u5883\u5230\u90e8\u7f72\u7684\u56db\u500b\u91cd\u8981\u6d41\u7a0b\uff0c\u4e86\u89e3\u9019\u4e9b\u6d41\u7a0b\u624d\u80fd\u5920\u77e5\u9053 Next.js compiler &hellip;<\/p>\n<p class=\"read-more\"> <a class=\"\" href=\"https:\/\/jimmyswebnote.com\/next-js-compiler\/\"> <span class=\"screen-reader-text\">Next.js Compiler \u4ecb\u7d39<\/span> Read More \u00bb<\/a><\/p>\n","protected":false},"author":1,"featured_media":2754,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[203,19],"tags":[204,205],"_links":{"self":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/2748"}],"collection":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/comments?post=2748"}],"version-history":[{"count":3,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/2748\/revisions"}],"predecessor-version":[{"id":2757,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/posts\/2748\/revisions\/2757"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media\/2754"}],"wp:attachment":[{"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/media?parent=2748"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/categories?post=2748"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jimmyswebnote.com\/wp-json\/wp\/v2\/tags?post=2748"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}