nuxt2.0性能优化 ant design vue 组件和图标按需引入
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'; // 加载 JSVue.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 {// 需要使用到的 IconsCaretRightOutline,SmileOutline,UpOutline,DownOutline,LogoutOutline,CloseOutline,EyeOutline,ProfileOutline,LeftOutline,SettingOutline,PlusOutline,SearchOutline,RightOutline,ClockCircleOutline,UserOutline,LockOutline,CheckCircleOutline
} from '@ant-design/icons';- 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']// ...]
};参考文档
Nuxt.js项目是antd 按需加载笔记
按需导入antd/ant-design-vue,Nuxt按需导入antd/ant-design-vue
ant-desigin-vue按需导入报错in ./node_modules/ant-design-vue/lib/button/style/index.less
Nuxt.js & Ant Design Vue 配置按需加载引入组件踩坑记录