\u7b2c\u4e09\u65b9CDN\u5e93<\/a>\u590d\u5236\u94fe\u63a5\u653e\u5165public\/index.html\u6587\u4ef6\u4e2d\uff0c\u5982\u4e0b\u6240\u793a \uff1a<\/p>\n![\"image.png\"](\"https:\/\/segmentfault.com\/img\/bVc9hiX\" "\\"image.png\\"")
![\"image.png\"](\"https:\/\/segmentfault.com\/img\/bVc9hiZ\" "\\"image.png\\"")
<\/p>\n
\u867d\u7136\u6211\u4eec\u5f15\u5165\u4e86\uff0c\u4f46\u662f\u6211\u4eec\u8fd8\u8981\u914d\u7f6ewebpack\u4e0d\u8981\u628anodejs\u5f15\u5165\u7684\u5305\u8fdb\u884c\u6253\u5305\u3002<\/p>\n
\u4fee\u6539vue.config.js\u6587\u4ef6\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
configureWebpack: {\n name: name,\n externals: {\n \/\/ \u5305\u540d: '\u5f15\u5165\u540d'\n vue: 'Vue',\n vuex: 'Vuex',\n 'vue-router': 'VueRouter',\n 'element-ui': 'Element',\n moment: 'moment',\n dayjs: 'dayjs',\n axios: 'axios',\n clipboard: 'ClipboardJS',\n echarts: 'echarts',\n html2canvas: 'html2canvas',\n 'js-beautify': 'beautifier',\n 'js-cookie': 'Cookies',\n lodash: '_',\n qrcode: 'QRCode',\n screenfull: 'screenfull',\n 'vue-clipboard2': 'VueClipboard',\n 'vue-i18n': 'VueI18n'\n }<\/code><\/pre>\n\u4e0a\u9762externals\u4e2dkey\u662f\u5305\u540d\uff0cvalue\u662f\u5f15\u5165\u540d\uff0c\u5927\u5bb6\u6309\u7167\u8fd9\u4e2a\u53c2\u8003\u8bbe\u7f6e\u5c31\u597d\u3002\u8fd9\u6837\u5c31\u5b8c\u6210\u4e86\u7b2c1\u6b65\u7684\u64cd\u4f5c\u3002<\/p>\n
\u4f7f\u7528npm\u5f15\u5165\u7684\u7b2c\u4e09\u65b9\u5305\u6587\u4ef6\u8fdb\u884c\u62c6\u5305<\/h2>\n
\u63a5\u4e0b\u6765\u6211\u4eec\u5206\u6790\u4e00\u4e0b\u524d\u7aef\u9879\u76ee\u6253\u5305\u540e\u7684\u62a5\u544a\uff0c\u5206\u6790\u6587\u4ef6\u5927\u5c0f\u60c5\u51b5\uff0c\u6839\u636e\u8fd9\u4e2a\u62a5\u544a\u6211\u4eec\u6765\u5224\u65ad\u662f\u5426\u8981\u5206\u5305\uff0c\u5982\u4e0b\u6240\u793a\u3002<\/p>\n
\u4fee\u6539vue.config.js\u6587\u4ef6<\/p>\n
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin\n\n configureWebpack: {\n name: name,\n externals: {\n \/\/ \u5305\u540d: '\u5f15\u5165\u540d'\n vue: 'Vue',\n vuex: 'Vuex',\n 'vue-router': 'VueRouter',\n 'element-ui': 'Element',\n moment: 'moment',\n dayjs: 'dayjs',\n axios: 'axios',\n clipboard: 'ClipboardJS',\n echarts: 'echarts',\n html2canvas: 'html2canvas',\n 'js-beautify': 'beautifier',\n 'js-cookie': 'Cookies',\n lodash: '_',\n qrcode: 'QRCode',\n screenfull: 'screenfull',\n 'vue-clipboard2': 'VueClipboard',\n 'vue-i18n': 'VueI18n'\n },\n resolve: {\n alias: {\n '@': resolve('src'),\n '@@': resolve('src\/x7')\n }\n }\n plugins: [\n new BundleAnalyzerPlugin()\n ]\n}<\/code><\/pre>\n\u4fee\u6539package.json\u6587\u4ef6<\/p>\n
"scripts": {\n "build:report": "vue-cli-service build --report"\n},<\/code><\/pre>\n\u8fd0\u884c\u547d\u4ee4\uff1a<\/p>\n
pnpm run build:report<\/code><\/pre>\n\u5982\u4e0b\u6240\u793a\uff0c\u5f53\u524d\u6587\u4ef6\u6253\u5305\u60c5\u51b5\uff1a<\/p>\n
![\"image.png\"](\"https:\/\/segmentfault.com\/img\/bVc9hjy\" "\\"image.png\\"")
<\/p>\n
![\"image.png\"](\"https:\/\/segmentfault.com\/img\/bVc9hjJ\" "\\"image.png\\"")
<\/p>\n
\u901a\u8fc7\u5206\u6790\u53ef\u4ee5\u77e5\u9053\uff0cchunk\u6587\u4ef6\u548capp\u6587\u4ef6\u6bd4\u8f83\u5927\uff0c\u6211\u4eec\u518d\u770b\u4e0b\u56fe\u8868\u770b\u770b\u80fd\u4e0d\u80fd\u628a\u91cc\u9762\u5927\u7684\u5305\u62c6\u5206\u51fa\u6765\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
![\"image.png\"](\"https:\/\/segmentfault.com\/img\/bVc9hjV\" "\\"image.png\\"")
<\/p>\n
\u901a\u8fc7\u56fe\u8868\u53ef\u4ee5\u770b\u51fa\u6765\uff0c\u8fd9\u4e9b\u5305\u90fd\u53ef\u4ee5\u62c6\u5206\u51fa\u6765\uff0c\u4e8e\u662f\u6211\u4eec\u6539\u4e0bvue.config.js\u628a\u4e0a\u9762\u7684\u5305\u5168\u90e8\u62c6\u5206\u51fa\u6765\uff0c\u5982\u4e0b\u6240\u793a\uff1a<\/p>\n
config.optimization.splitChunks({\n chunks: 'all',\n minSize: 20000,\n maxSize: 0,\n minChunks: 1,\n maxAsyncRequests: 30,\n maxInitialRequests: 30,\n automaticNameDelimiter: '\/~',\n enforceSizeThreshold: 50000,\n cacheGroups: {\n libs: {\n name: 'chunk-libs',\n test: \/[\/\/\/]node_modules[\/\/\/]\/,\n priority: 120,\n chunks: 'initial' \/\/ only package third parties that are initially dependent\n },\n corejs: {\n name: 'chunk-corejs', \/\/ split elementUI into a single package\n priority: 141, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?core-js(.*)\/ \/\/ in order to adapt to cnpm\n },\n graphic: {\n name: 'chunk-zrender', \/\/ split elementUI into a single package\n priority: 142, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?zrender(.*)\/ \/\/ in order to adapt to cnpm\n },\n viewerjs: {\n name: 'chunk-viewerjs', \/\/ split elementUI into a single package\n priority: 143, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?viewerjs(.*)\/ \/\/ in order to adapt to cnpm\n },\n hotFormulaParser: {\n name: 'chunk-hotFormulaParser', \/\/ split elementUI into a single package\n priority: 144, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?hot-formula-parser(.*)\/ \/\/ in order to adapt to cnpm\n },\n elementUI: {\n name: 'chunk-elementUI', \/\/ split elementUI into a single package\n priority: 130, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?element-ui(.*)\/ \/\/ in order to adapt to cnpm\n },\n einUI: {\n name: 'chunk-einUI', \/\/ split elementUI into a single package\n priority: 125, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?ein-ui(.*)\/ \/\/ in order to adapt to cnpm\n },\n echarts: {\n name: 'chunk-echarts', \/\/ split elementUI into a single package\n priority: 122, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?echarts(.*)\/ \/\/ in order to adapt to cnpm\n },\n handsontable: {\n name: 'chunk-handsontable', \/\/ split elementUI into a single package\n priority: 123, \/\/ the weight needs to be larger than libs and app or it will be packaged into libs or app\n test: \/[\/\/\/]node_modules[\/\/\/]_?handsontable(.*)\/ \/\/ in order to adapt to cnpm\n },\n codemirror: {\n name: 'chunk-codemirror',\n test: \/[\/\/\/]node_modules[\/\/\/]_?codemirror(.*)\/, \/\/ in order to adapt to cnpm\n minChunks: 1, \/\/ minimum common number\n priority: 140,\n reuseExistingChunk: true\n }\n }\n })<\/code><\/pre>\n\u6211\u4eec\u628a\u60f3\u8981\u62c6\u5206\u7684\u5305\u90fd\u653e\u5230cacheGroups\u4e2d\uff0c<\/p>\n
\u5c06\u9879\u76ee\u6587\u4ef6\u7684\u516c\u5171\u90e8\u5206\u8fdb\u884c\u62c6\u5305\uff0c\u5982src\/components\u548csrc\/views\u6587\u4ef6\u5939<\/h2>\n\u603b\u7ed3<\/h2>\n\u5f15\u7528<\/h2>\n
https:\/\/segmentfault.com\/a\/1190000044118204<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"\u524d\u8a00 \u6700\u8fd1\u53d1\u73b0\u516c\u53f8\u524d\u7aef\u9879\u76ee\u6253\u5305\u540e\u751f\u6210\u7684\u5355\u4e2a\u6587\u4ef6\u90fd\u8d85\u8fc74Mb\u4e86\uff0c\u5bfc\u81f4\u9875\u9762\u6253\u5f00\u7684\u65f6\u5019\u975e\u5e38\u6162\uff0c\u4e8e\u662f\u7740\u624b\u4f18\u5316\u6253\u5305\uff0c\u76ee\u6807 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[4],"tags":[],"class_list":["post-10008099","post","type-post","status-publish","format-standard","hentry","category-share"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10008099","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10008099"}],"version-history":[{"count":0,"href":"https:\/\/itmax.cn\/index.php?rest_route=\/wp\/v2\/posts\/10008099\/revisions"}],"wp:attachment":[{"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10008099"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=10008099"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itmax.cn\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=10008099"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}