{"id":1309,"date":"2023-03-18T11:16:34","date_gmt":"2023-03-18T03:16:34","guid":{"rendered":"https:\/\/www.appblog.cn\/?p=1309"},"modified":"2023-04-29T09:14:10","modified_gmt":"2023-04-29T01:14:10","slug":"summary-of-project-performance-optimization-generated-by-vue-cli","status":"publish","type":"post","link":"https:\/\/www.appblog.cn\/index.php\/2023\/03\/18\/summary-of-project-performance-optimization-generated-by-vue-cli\/","title":{"rendered":"Vue Cli \u751f\u6210\u7684\u9879\u76ee\u6027\u80fd\u4f18\u5316\u603b\u7ed3"},"content":{"rendered":"

\u56fe\u7247\u5904\u7406<\/h3>\n

\u67e5\u627e\u5404\u79cd\u56fe\u7247\uff0c\u5148\u5355\u72ec\u7ed9\u56fe\u7247\u505a\u5904\u7406\uff0c\u4e4b\u540e\u8fdb\u884csprit\u5904\u7406\uff08\u9488\u5bf9\u90a3\u4e9b\u4e0d\u53d8\u7684icon\u5c0f\u56fe\u6807\uff09<\/p>\n

\u914d\u7f6ewebpack-bundle-analyzer\u8fdb\u884c\u4ee3\u7801\u5206\u6790<\/h3>\n
\/\/ package.json\u6587\u4ef6\u4e2d\u589e\u52a0\n"scripts": {\n  "analyz": "NODE_ENV=production npm_config_report=true npm run build"\n},<\/code><\/pre>\n
<\/p>\n
\u5206\u6790\u4e4b\u540e\u4e3b\u8981\u9488\u5bf9\u4e00\u4e0b\u51e0\u4e2a\u95ee\u9898\uff1a<\/p>\n
\u8def\u7531\u61d2\u52a0\u8f7d\u95ee\u9898<\/h4>\n
\/\/ \u91c7\u7528\u7bad\u5934\u51fd\u6570\u8fdb\u884c\u61d2\u52a0\u8f7d\u5904\u7406\ncomponent: () => import('.\/index.vue')<\/code><\/pre>\n
\u5220\u9664lodash\u5305\u5904\u7406<\/h4>\n
\u7531\u4e8elodash\u5305\u53ea\u7528\u4e86merge\u51fd\u6570\u5904\u7406\u591a\u8bed\u8a00\u5408\u5e76\u95ee\u9898\uff0c\u6240\u4ee5\uff0c\u9488\u5bf9\u6027\u7684\u628a\u8fd9\u4e2a\u5305\u7ed9\u5220\u6389\uff0c\u5e76\u4e14\u91cd\u5199\u4e86merge\u51fd\u6570<\/p>\n
moment\u65f6\u95f4\u51fd\u6570<\/h4>\n
\u7531\u4e8emoment\u51fd\u6570\u4e2d\u5b58\u5728\u5f88\u591a\u591a\u8bed\u8a00\u5305\uff0c\u800c\u9879\u76ee\u4e2d\u4f7f\u7528\u7684\u65f6\u5019\uff0c\u5e76\u672a\u4f7f\u7528\u5230\uff0c\u6240\u4ee5\u4f7f\u7528\u4e86webpack\u7684ignore\u51fd\u6570\u8fdb\u884c\u5ffd\u7565locale\u4e0b\u7684\u8bed\u8a00\u5305\u3002<\/p>\n
config\n  .plugin('ignore')\n  .use(new webpack.IgnorePlugin(\/^\\.\\\/locale$\/, \/moment$\/))\n  .end();<\/code><\/pre>\n
\u653e\u5f03prefetch\u65b9\u6cd5<\/h4>\n
\u9996\u9875\u52a0\u8f7d\u5b8c\uff0c\u4e0d\u53bbprefetch\u5176\u4ed6\u5b50\u9875\u9762\u7684\u4ee3\u7801<\/p>\n
config.plugins.delete('prefetch');<\/code><\/pre>\n
\u6700\u7ec8vue.config.js\u4e2d\u7684\u4ee3\u7801<\/h4>\n
const webpack = require('webpack');\n\nconst TerserPlugin = require('terser-webpack-plugin');\n\nmodule.exports = {\n  chainWebpack: config => {\n    \/* \u6dfb\u52a0\u5206\u6790\u5de5\u5177*\/\n    if (process.env.NODE_ENV === 'production') {\n      if (process.env.npm_config_report) {\n        config\n          .plugin('webpack-bundle-analyzer')\n          .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)\n          .end();\n        config.plugins.delete('prefetch');\n      }\n    }\n    \/\/\u5ffd\u7565\/moment\/locale\u4e0b\u7684\u6240\u6709\u6587\u4ef6\n    config\n      .plugin('ignore')\n      .use(new webpack.IgnorePlugin(\/^\\.\\\/locale$\/, \/moment$\/))\n      .end();\n  }\n}<\/code><\/pre>\n
\u672c\u6587\u8f6c\u8f7d\u81f3\uff1ahttps:\/\/www.jianshu.com\/p\/2af856f8d79a<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
\u56fe\u7247\u5904\u7406 \u67e5\u627e\u5404\u79cd\u56fe\u7247\uff0c\u5148\u5355\u72ec\u7ed9\u56fe\u7247\u505a\u5904\u7406\uff0c\u4e4b\u540e\u8fdb\u884csprit\u5904\u7406\uff08\u9488\u5bf9\u90a3\u4e9b\u4e0d\u53d8\u7684icon\u5c0f\u56fe\u6807\uff09 \u914d\u7f6eweb […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[35],"tags":[],"class_list":["post-1309","post","type-post","status-publish","format-standard","hentry","category-vue"],"_links":{"self":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1309","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/comments?post=1309"}],"version-history":[{"count":0,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/posts\/1309\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/media?parent=1309"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/categories?post=1309"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.appblog.cn\/index.php\/wp-json\/wp\/v2\/tags?post=1309"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}