nuxt2.0性能优化 ant design vue 组件和图标按需引入
配置
nuxt服务端渲染 按需引入 ant design vue 组件
- 安装所需要的依赖版本 nuxt@2.15.8 vue@2.6.14 ant-design-vue@1.7.8 less@2.7.3 less-loader@5.0.0
npm install nuxt@2.15.8 vue@2.6.14 ant-design-vue@1.7.8
npm install less@2.7.3 less-loader@5.0.0 --save-dev
- plugins配置
新建一个文件 plugins/antd-ui.js plugins/icons.js
antd-ui.js
最开始全部引入
import Vue from 'vue';
import Antd from 'ant-design-vue/lib';
Vue.use(Antd);
按需引入的组件
import Vue from 'vue';
import Input from 'ant-design-vue/lib/input'; // 加载 JS
import InputNumber from 'ant-design-vue/lib/input-number';
import Button from 'ant-design-vue/lib/button';
import Radio from 'ant-design-vue/lib/radio';
import Checkbox from 'ant-design-vue/lib/checkbox';
import Select from 'ant-design-vue/lib/select'; // 加载 JS
import Card from 'ant-design-vue/lib/card'; // 加载 JS
import Form from 'ant-design-vue/lib/form'; // 加载 JS
import FormModel from 'ant-design-vue/lib/form-model'; // 加载 JS
import Row from 'ant-design-vue/lib/row'; // 加载 JS
import Col from 'ant-design-vue/lib/col'; // 加载 JS
import Modal from 'ant-design-vue/lib/modal'; // 加载 JS
import Table from 'ant-design-vue/lib/table'; // 加载 JS
import Tabs from 'ant-design-vue/lib/tabs'; // 加载 JS
import Icon from 'ant-design-vue/lib/icon'; // 加载 JS
import Popover from 'ant-design-vue/lib/popover'; // 加载 JS
import Dropdown from 'ant-design-vue/lib/dropdown'; // 加载 JS
import Avatar from 'ant-design-vue/lib/avatar'; // 加载 JS
import Breadcrumb from 'ant-design-vue/lib/breadcrumb'; // 加载 JS
import Steps from 'ant-design-vue/lib/steps'; // 加载 JS
import Menu from 'ant-design-vue/lib/menu'; // 加载 JS
import Drawer from 'ant-design-vue/lib/drawer'; // 加载 JS
import Tooltip from 'ant-design-vue/lib/tooltip'; // 加载 JS
import Alert from 'ant-design-vue/lib/alert'; // 加载 JS
import Tag from 'ant-design-vue/lib/tag'; // 加载 JS
import Divider from 'ant-design-vue/lib/divider'; // 加载 JS
import DatePicker from 'ant-design-vue/lib/date-picker'; // 加载 JS
import TimePicker from 'ant-design-vue/lib/time-picker'; // 加载 JS
import Upload from 'ant-design-vue/lib/upload'; // 加载 JS
import Popconfirm from 'ant-design-vue/lib/popconfirm'; // 加载 JS
import Descriptions from 'ant-design-vue/lib/descriptions'; // 加载 JS
import Collapse from 'ant-design-vue/lib/collapse'; // 加载 JS
import Pagination from 'ant-design-vue/lib/pagination'; // 加载 JS
import Carousel from 'ant-design-vue/lib/carousel'; // 加载 JS
import Spin from 'ant-design-vue/lib/spin'; // 加载 JS
import Empty from 'ant-design-vue/lib/empty'; // 加载 JS
import Cascader from 'ant-design-vue/lib/cascader'; // 加载 JS
import message from 'ant-design-vue/lib/message'; // 加载 JS
import notification from 'ant-design-vue/lib/notification'; // 加载 JS
Vue.use(Input);
Vue.use(InputNumber);
Vue.use(Button);
Vue.use(Radio);
Vue.use(Checkbox);
Vue.use(Select);
Vue.use(Card);
Vue.use(Form);
Vue.use(FormModel);
Vue.use(Row);
Vue.use(Col);
Vue.use(Modal);
Vue.use(Table);
Vue.use(Tabs);
Vue.use(Icon);
Vue.use(Popover);
Vue.use(Dropdown);
Vue.use(Avatar);
Vue.use(Breadcrumb);
Vue.use(Steps);
Vue.use(Spin);
Vue.use(Menu);
Vue.use(Drawer);
Vue.use(Tooltip);
Vue.use(Alert);
Vue.use(Tag);
Vue.use(Divider);
Vue.use(DatePicker);
Vue.use(TimePicker);
Vue.use(Upload);
Vue.use(Popconfirm);
Vue.use(Descriptions);
Vue.use(Collapse);
Vue.use(Pagination);
Vue.use(Carousel);
Vue.use(Empty);
Vue.use(Cascader);
Vue.prototype.$message = message;
Vue.prototype.$notification = notification;
export default ({ app }, inject) => {
inject('message', message);
};
icons.js antd icon 图标 按需加载
export {
// 需要使用到的 Icons
CaretRightOutline,
SmileOutline,
UpOutline,
DownOutline,
LogoutOutline,
CloseOutline,
EyeOutline,
ProfileOutline,
LeftOutline,
SettingOutline,
PlusOutline,
SearchOutline,
RightOutline,
ClockCircleOutline,
UserOutline,
LockOutline,
CheckCircleOutline
} from '@ant-design/icons';
注意： message组件、form校验图标使用的图标是带fill
CheckCircleFill, InfoCircleFill, ExclamationCircleFill, CloseCircleFill
- nuxt.config.js 配置
安装 babel-plugin-import
npm install babel-plugin-import path --save-dev
plugins: [
{ src: '~/plugins/antd-ui.js' },
],
transpile: [/ant-design-vue/],
vendor: ['antd-ui'],
build: {
analyze: true,
babel: {
plugins: [
'@babel/plugin-proposal-optional-chaining'
// ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: true }, 'ant-design-vue']
]
},
extend(config, ctx) {
if (!ctx.isDev) {
config.resolve.alias['@ant-design/icons/lib/dist$'] = path.resolve(__dirname, './plugins/icons.js'); // 引入需要的
}
},
optimization: {
splitChunks: {
chunks: 'all',
maxSize: 500000,
cacheGroups: {
antdesignvue: {
test: /node_modules[\\/]ant-design-vue/,
chunks: 'all',
priority: 20,
name: true
},
antdesign: {
test: /node_modules[\\/]@ant-design/,
chunks: 'all',
priority: 15,
name: true
},
}
}
}
}
- .babelrc 配置
{
"presets": [
[
"env",
{
"modules": false,
"useBuiltIns": "entry"
}
],
"es2015",
"stage-2",
"@vue/app",
"@babel/preset-env"
],
"plugins": ["@babel/plugin-proposal-optional-chaining", ["import", { "libraryName": "ant-design-vue", "libraryDirectory": "es", "style": true }]]
}
- babel.config.js 配置
module.exports = {
presets: [['@vue/app', { useBuiltIns: 'entry' }]],
plugins: [
[
'import',
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es',
style: true // 加载less
},
'ant-design-vue'
]
// ...
]
};
参考文档
按需导入antd/ant-design-vue,Nuxt按需导入antd/ant-design-vue
ant-desigin-vue按需导入报错in ./node_modules/ant-design-vue/lib/button/style/index.less
