{"id":2631,"date":"2020-04-14T12:09:40","date_gmt":"2020-04-14T04:09:40","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=2631"},"modified":"2026-08-18T12:35:28","modified_gmt":"2026-08-18T04:35:28","slug":"%e5%a6%82%e4%bd%95%e6%8f%90%e9%ab%98vue%e5%89%8d%e5%90%8e%e7%ab%af%e5%88%86%e7%a6%bb%e9%a1%b9%e7%9b%ae%e9%a6%96%e9%a1%b5%e5%8a%a0%e8%bd%bd%e9%80%9f%e5%ba%a6","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=2631","title":{"rendered":"\u5982\u4f55\u63d0\u9ad8Vue\u524d\u540e\u7aef\u5206\u79bb\u9879\u76ee\u9996\u9875\u52a0\u8f7d\u901f\u5ea6"},"content":{"rendered":"
\n

\u524d\u540e\u7aef\u5206\u79bb\u505a\u6210 SPA \u540e\uff0c\u9996\u9875\u6587\u4ef6\u5e38\u5e38\u8d85\u8fc7 1MB\uff0c\u9996\u5c4f\u5c31\u4f1a\u6162\u3002\u5e38\u89c1\u601d\u8def\u6709\uff1aUI \u7ec4\u4ef6\u6309\u9700\u52a0\u8f7d<\/strong>\u3001\u8def\u7531\u61d2\u52a0\u8f7d\u3001\u5904\u7406\u7ec4\u4ef6\u91cd\u590d\u6253\u5305\u3001\u4ee5\u53ca gzip<\/strong>\u3002\u524d\u4e24\u8005\u8981\u770b\u9879\u76ee\u6761\u4ef6\uff0cUI \u6309\u9700\u548c gzip \u5219\u51e0\u4e4e\u603b\u80fd\u505a\u3002<\/p>\n

\u672c\u6587\u5148\u804a ElementUI \u6309\u9700\u5f15\u5165\u548c gzip\u3002\u6309\u9700\u80fd\u62c6\u6389\u5de8\u5927\u7684 element-ui.commons.js\uff1bgzip \u65e0\u8bba\u628a\u524d\u7aef\u62f7\u8fdb Spring Boot\uff0c\u8fd8\u662f\u7528 Nginx \u5206\u5f00\u90e8\u7f72\uff0c\u90fd\u80fd\u7acb\u523b\u628a\u4f20\u8f93\u4f53\u79ef\u538b\u4e0b\u53bb\u3002<\/p>\n\n\n\n\n\n\n\n
\u624b\u6bb5<\/th>\n\u505a\u4ec0\u4e48<\/th>\n\u6548\u679c<\/th>\n<\/tr>\n<\/thead>\n
ElementUI \u6309\u9700<\/td>\nbabel-plugin-component + \u6309\u7ec4\u4ef6 import<\/td>\nvendor \u91cc\u90a3\u5757 commons \u6d88\u5931\uff0c\u5927\u7ea6\u5c11 150KB<\/td>\n<\/tr>\n
\u540e\u7aef gzip<\/td>\nSpring Boot application.yml \u6253\u5f00\u538b\u7f29<\/td>\n\u54cd\u5e94\u5e26 Content-Encoding: gzip<\/td>\n<\/tr>\n
Nginx gzip<\/td>\ngzip on \u5e76\u914d types \/ \u9608\u503c<\/td>\n\u5927\u4e8e 1K \u7684 js\/css \u7b49\u88ab\u538b\u7f29<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e00\u3001ElementUI \u6309\u9700\u52a0\u8f7d<\/h2>\n

\u95ee\u9898\u590d\u73b0<\/h3>\n

\u4e0d\u505a\u4f18\u5316\u65f6\uff0c\u4e00\u822c\u5728 main.js \u6574\u5305\u5f15\u5165\uff1a<\/p>\n

import ElementUI from 'element-ui';\n\nimport 'element-ui\/lib\/theme-chalk\/index.css';\n\nVue.use(ElementUI,{size:'small'});<\/code><\/pre>\n
CSS \u5fc5\u987b\u5f15\u5165\u3002\u4f46\u8fd9\u79cd\u5199\u6cd5\u4f1a\u628a\u63a5\u8fd1 60 \u4e2a\u7ec4\u4ef6\u5168\u90e8\u6253\u8fdb\u9879\u76ee\uff0c\u7528\u4e0d\u5230\u7684\u5c31\u6d6a\u8d39\u3002\u7528\u4e0b\u9762\u547d\u4ee4\u751f\u6210 report.html \u5206\u6790\u5305\u5185\u5bb9\uff1a<\/p>\n
vue-cli-service build --report<\/code><\/pre>\n
\u5173\u952e\u65e5\u5fd7\u7c7b\u4f3c\uff1a<\/p>\n
warning\n\n\n\nentrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\n\nEntrypoints:\n\n  app (1.17 MiB)\n\n      css\/chunk-vendors.9948ce82.css\n\n      js\/chunk-vendors.11959501.js\n\n      css\/app.4e8a7623.css\n\n      js\/app.ce6f575c.js\n\n\n\n  File                                    Size              Gzipped\n\n\n\n  dist\/js\/chunk-vendors.11959501.js       840.77 KiB        227.94 KiB\n\n  dist\/js\/app.ce6f575c.js                 99.08 KiB         30.95 KiB\n\n  dist\/js\/chunk-64435448.d0a0516e.js      26.52 KiB         5.87 KiB\n\n  dist\/js\/chunk-0c17a57a.d553638c.js      23.79 KiB         5.49 KiB\n\n  dist\/js\/chunk-a3fdbb9c.ddc4c008.js      13.30 KiB         3.45 KiB\n\n  dist\/js\/chunk-54277bc7.2882c4cd.js      10.40 KiB         2.95 KiB\n\n  dist\/js\/chunk-4e552d82.c64f4d10.js      1.78 KiB          0.63 KiB\n\n  dist\/js\/chunk-18458ebc.32fb57c9.js      1.54 KiB          0.62 KiB\n\n  dist\/js\/chunk-2d0d03c8.3a093d55.js      0.52 KiB          0.36 KiB\n\n  dist\/js\/chunk-2d237c54.0b312051.js      0.43 KiB          0.33 KiB\n\n  dist\/css\/chunk-vendors.9948ce82.css     258.19 KiB        41.36 KiB\n\n  dist\/css\/app.4e8a7623.css               3.46 KiB          1.09 KiB\n\n  dist\/css\/chunk-0c17a57a.9fe19f94.css    0.86 KiB          0.35 KiB\n\n  dist\/css\/chunk-64435448.3755e146.css    0.30 KiB          0.15 KiB<\/code><\/pre>\n
\u5165\u53e3\u5df2\u7ecf\u8d85\u51fa\u5b98\u65b9\u5efa\u8bae\u7684 244KB\u3002\u628a\u6253\u5305\u7ed3\u679c\u62f7\u5230 Spring Boot \u7684 resources\/static\uff0c\u6d4f\u89c8\u5668\u91cc\u6700\u5927\u7684 chunk-vendors.*.js \u52a0\u8f7d\u7528\u4e86 369ms\uff1a<\/p>\n
\"\"<\/p>\n
dist \u91cc\u7684 report.html \u80fd\u770b\u51fa\u662f\u8c01\u628a JS \u6491\u5927\u7684\uff1achunk-vendors \u5927\uff0c\u4e3b\u8981\u662f\u56e0\u4e3a\u91cc\u9762\u7684 element-ui.commons.js \u5927\u3002\u6bcf\u4e2a\u6a21\u5757\u90fd\u80fd\u4f18\u5316\uff0c\u4f46\u5148\u6253\u8fd9\u4e2a\u51fa\u5934\u9e1f\u3002<\/p>\n
\"\"<\/p>\n
\u6309\u9700\u5f15\u5165<\/h3>\n
\u5b98\u7f51\u7684\u529e\u6cd5\uff1a\u5148\u88c5 babel-plugin-component\uff1a<\/p>\n
npm install babel-plugin-component -D<\/code><\/pre>\n
\u6539 babel.config.js\uff1a<\/p>\n
module.exports = {\n\n    presets: [\n\n        '@vue\/app',\n\n        ['@babel\/preset-env', {\n\n            modules: false\n\n        }]\n\n    ],\n\n    plugins: [\n\n        [\n\n            \"component\",\n\n            {\n\n                \"libraryName\": \"element-ui\",\n\n                \"styleLibraryName\": \"theme-chalk\"\n\n            }\n\n        ]\n\n    ]\n\n}<\/code><\/pre>\n
\u518d\u6539 main.js\uff0c\u7528\u5230\u7684\u7ec4\u4ef6\u4e00\u4e2a\u4e00\u4e2a\u5f15\u5165\uff1a<\/p>\n
import {\n\n    Button,\n\n    Input,\n\n    Table,\n\n    TableColumn,\n\n    Dialog,\n\n    Card,\n\n    Container,\n\n    Icon,\n\n    Select,\n\n    Form,\n\n    Tag,\n\n    Tree,\n\n    Pagination,\n\n    Badge,\n\n    Loading,\n\n    Message,\n\n    MessageBox,\n\n    Menu,\n\n    Tabs,\n\n    TabPane,\n\n    Breadcrumb,\n\n    BreadcrumbItem,\n\n    Dropdown,\n\n    Steps,\n\n    Tooltip,\n\n    Popover,\n\n    Collapse,\n\n    FormItem,\n\n    Checkbox,\n\n    Header,\n\n    DropdownMenu,\n\n    DropdownItem,\n\n    Aside,\n\n    Main,\n\n    MenuItem,\n\n    Submenu,\n\n    Option,\n\n    Col,\n\n    Row,\n\n    Upload,\n\n    Radio,\n\n    DatePicker,\n\n    RadioGroup,\n\n    CollapseItem,\n\n    Switch\n\n} from 'element-ui';\n\nimport 'element-ui\/lib\/theme-chalk\/index.css';\n\nVue.prototype.$ELEMENT = {size: 'small', zIndex: 3000};\n\nVue.use(Switch);\n\nVue.use(CollapseItem);\n\nVue.use(Radio);\n\nVue.use(RadioGroup);\n\nVue.use(DatePicker);\n\nVue.use(Upload);\n\nVue.use(Row);\n\nVue.use(Col);\n\nVue.use(Option);\n\nVue.use(Submenu);\n\nVue.use(MenuItem);\n\nVue.use(Header);\n\nVue.use(DropdownMenu);\n\nVue.use(DropdownItem);\n\nVue.use(Aside);\n\nVue.use(Main);\n\nVue.use(Checkbox);\n\nVue.use(FormItem);\n\nVue.use(Collapse);\n\nVue.use(Popover);\n\nVue.use(Menu);\n\nVue.use(Tabs);\n\nVue.use(TabPane);\n\nVue.use(Breadcrumb);\n\nVue.use(BreadcrumbItem);\n\nVue.use(Dropdown);\n\nVue.use(Steps);\n\nVue.use(Tooltip);\n\nVue.use(Tree);\n\nVue.use(Pagination);\n\nVue.use(Badge);\n\nVue.use(Loading);\n\nVue.use(Button);\n\nVue.use(Input);\n\nVue.use(Table);\n\nVue.use(TableColumn);\n\nVue.use(Dialog);\n\nVue.use(Card);\n\nVue.use(Container);\n\nVue.use(Icon);\n\nVue.use(Select);\n\nVue.use(Form);\n\nVue.use(Tag);\n\nVue.prototype.$alert = MessageBox.alert\n\nVue.prototype.$confirm = MessageBox.confirm<\/code><\/pre>\n
\u4e24\u5904\u8981\u6ce8\u610f\uff1aMessageBox \u7684\u5f15\u5165\u65b9\u5f0f\u548c\u5176\u4ed6\u7ec4\u4ef6\u4e0d\u540c\uff1b\u7ed9\u7ec4\u4ef6\u7edf\u4e00\u5b9a\u5236 size \u548c zIndex \u7684\u65b9\u5f0f\u4e5f\u53d8\u4e86\u3002\u7136\u540e\u518d build –report\uff1a<\/p>\n
entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.\n\nEntrypoints:\n\n  app (1.03 MiB)\n\n      css\/chunk-vendors.26d2c5b9.css\n\n      js\/chunk-vendors.e2a11728.js\n\n      css\/app.4e8a7623.css\n\n      js\/app.c5dd78e5.js\n\n\n\n  File                                    Size              Gzipped\n\n\n\n  dist\/js\/chunk-vendors.e2a11728.js       683.05 KiB        177.91 KiB\n\n  dist\/js\/app.c5dd78e5.js                 101.70 KiB        31.90 KiB\n\n  dist\/js\/chunk-64435448.d0a0516e.js      26.52 KiB         5.87 KiB\n\n  dist\/js\/chunk-0c17a57a.d553638c.js      23.79 KiB         5.49 KiB\n\n  dist\/js\/chunk-33b8cd94.7bbae1a0.js      13.30 KiB         3.46 KiB\n\n  dist\/js\/chunk-df7e035a.414b548f.js      10.40 KiB         2.95 KiB\n\n  dist\/js\/chunk-4e552d82.c64f4d10.js      1.78 KiB          0.63 KiB\n\n  dist\/js\/chunk-18458ebc.32fb57c9.js      1.54 KiB          0.62 KiB\n\n  dist\/js\/chunk-2d0d03c8.3a093d55.js      0.52 KiB          0.36 KiB\n\n  dist\/js\/chunk-2d237c54.0b312051.js      0.43 KiB          0.33 KiB\n\n  dist\/css\/chunk-vendors.26d2c5b9.css     262.71 KiB        42.11 KiB\n\n  dist\/css\/app.4e8a7623.css               3.46 KiB          1.09 KiB\n\n  dist\/css\/chunk-0c17a57a.9fe19f94.css    0.86 KiB          0.35 KiB\n\n  dist\/css\/chunk-64435448.3755e146.css    0.30 KiB          0.15 KiB<\/code><\/pre>\n
\u548c\u524d\u9762\u6bd4\uff0c\u6309\u9700\u5f15\u5165\u6709\u6548\u679c\uff0c\u4f46\u4e0d\u7b97\u60ca\u4eba\u3002\u518d\u6253\u5f00 report.html\uff1a\u5e9e\u5927\u7684 element-ui.commons.js \u6ca1\u4e86\uff0c\u6362\u6210\u4e00\u5806\u5c0f\u6a21\u5757\uff0c\u76f8\u5173\u6587\u4ef6\u5927\u7ea6\u5c11\u4e86 150KB\u3002\u611f\u89c9\u8fd8\u4e0d\u591f\uff0c\u7ee7\u7eed\u4e0a gzip\u3002<\/p>\n
\"\"<\/p>\n
\u4e8c\u3001gzip\uff1a\u4e24\u79cd\u90e8\u7f72<\/h2>\n