開機時間還是太長,進一步縮小檔案,把Element-UI按需加載需安裝
除了原先的Element-UI安裝
npm install element-ui --save-dev
還需要以下安裝
npm install babel-plugin-component --save-dev
會問你是否全局載入還是按需載入,選按需載入時若是新專案會根目錄自動生成 babel.config.js及/src目錄app.vue,及plugins目錄內的element.js,原有專案會直接報錯 Token undefine,不理他後續說明
npm install babel-preset-env --save-dev
npm install babel-plugin-component --save-dev
以下是檔案內容及修改main.js
改後 npm run build 即可發現檔案變小了!
babel.config.js
module.exports = {
"presets": [
"@vue/app"
],
"plugins": [
[
"component",
{
"libraryName": "element-ui",
"styleLibraryName": "theme-chalk"
}
]
]
}
/src/plugins/element.js
import Vue from 'vue';
import { Col,Row,Button,Input,Dialog,Dropdown,DropdownItem,DropdownMenu } from 'element-ui';
Vue.use(Col);
Vue.use(Row);
Vue.use(Button);
Vue.use(Input);
Vue.use(Dialog);
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(DropdownItem);
main.js內改為按需載入
//import ElementUI from 'element-ui'; <==改為底下按需引入
import { Col,Row,Button,Input,Dialog,Dropdown,DropdownItem,DropdownMenu } from 'element-ui';
//Vue.use(ElementUI, { i18n: (key, value) => i18n.t(key, value), }); <==改為底下按需引入
Vue.use(Col, { i18n: (key, value) => i18n.t(key, value),});
Vue.use(Row, { i18n: (key, value) => i18n.t(key, value),});
Vue.use(Button, { i18n: (key, value) => i18n.t(key, value),});
Vue.use(Input, { i18n: (key, value) => i18n.t(key, value),});
Vue.use(Dialog, { i18n: (key, value) => i18n.t(key, value),});
Vue.use(Dropdown, { i18n: (key, value) => i18n.t(key, value),});Vue.use(DropdownItem, { i18n: (key, value) => i18n.t(key, value),});Vue.use(DropdownMenu, { i18n: (key, value) => i18n.t(key, value),});