vxe-table Import on demand 按需加载 详细教程

vxe-table Import on demand 按需加载 详细教程，v2 - v4 按需加载、vite + vxe-table 按需加载

webpack + babel 方式 v1 ~ v4

1. 首先通过 cli 创建一个项目

vue create my-project
cd my-project
npm run serve

项目创建完成，正常跑起来

先来打个包

npm run build

打包完成，空项目的情况下 vue 打包后的大小为 128KB

2. 安装 vxe-table

npm install vxe-table xe-utils

import Vue from 'vue'
import 'xe-utils'
import VXETable from 'vxe-table'
import 'vxe-table/lib/style.css'Vue.use(VXETable)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'import './plugins/vxe-table'Vue.config.productionTip = falsenew Vue({router,store,render: h => h(App)
}).$mount('#app')

<template><div><vxe-tableborder:data="tableData"><vxe-column type="seq" title="Number" width="80">vxe-column><vxe-column field="name" title="Name">vxe-column><vxe-column field="sex" title="Sex">vxe-column><vxe-column field="address" title="Address">vxe-column>vxe-table>div>
template><script>
export default {name: 'MyTable',data () {return {tableData: [{ id: 10001, name: 'Test1', role: 'Developer', sex: 'Man', address: 'Address abc123' },{ id: 10002, name: 'Test2', role: 'Developer', sex: 'Female', address: 'Address rttry' },{ id: 10003, name: 'Test3', role: 'Developer', sex: 'Man', address: 'Address xxxxx' }]}}
}
script>

3. 安装 babel 插件，配置插件

由于只用了表格的基本功能，不需要安装全部功能，我们可以通过按需加载的方式来减少包的体积

安装按需加载所依赖的工具 babel-plugin-import

npm install babel-plugin-import -D

修改配置文件 babel.config.js，增加 plugins 配置项
必须严格安装官网用法，按需就用按需的用法，全局就用全局的用法

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],/*** 注意：如果配置了按需导入那么就无法使用全局安装，因为全局的代码被按需插件切割掉了，只保留按需的代码* 报错：VXETable is not defined* 解决：去掉按需插件配置即可全局按需*/plugins: [['import',{libraryName: 'vxe-table',style: true // 是否按需加载样式}]]
}

修改安装文件 src/plugins/table.js，这时候就不能使用 default 导出，因为代码被按照模块进行切割了，必须使用单个导出的方式，如下：

import Vue from 'vue'
import XEUtils from 'xe-utils'
import {VXETable,Icon,Header,Column,Table
} from 'vxe-table'
import zhCN from 'vxe-table/lib/locale/lang/zh-CN'// 按需加载的方式默认是不带国际化的，需要自行导入
VXETable.setup({// 使用 vue-i18n 解析占位符 '{xx}'//i18n: (key, args) => i18n.t(key, args),// 使用 xe-utils 解析占位符 '{xx}'i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCN, key), args)
})// 按需导入依赖的模块
Vue.use(Icon)
Vue.use(Header)
Vue.use(Column)
// 导入表格
Vue.use(Table)

按需加载到此就配置完成了，接下来再打个包看看

按需加载后体积小了一半，只剩下 321KB，查看官网的例子

vite 方式 v4

全部安装后差不多达到 500KB+

1.安装表格

npm install vxe-table@next xe-utils

2.安装 vite 插件，配置插件

npm vite-plugin-style-import -D

修改 vite.config.ts 配置文件

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import styleImport from 'vite-plugin-style-import'export default defineConfig({plugins: [vue(),styleImport({libs: [{libraryName: 'vxe-table',esModule: true,resolveComponent: (name) => `vxe-table/es/${name}`,resolveStyle: (name) => `vxe-table/es/${name}/style.css`}]})]
})

src/plugins/vxe-table.ts

import { App } from 'vue'
import XEUtils from 'xe-utils'
import {VXETable,Header,Icon,Column,Table
} from 'vxe-table'
import 'vxe-table/lib/style.css'
import zhCNLocat from 'vxe-table/lib/locale/lang/zh-CN'// 全局默认参数
VXETable.setup({version: 0,zIndex: 100,table: {autoResize: true}
})// 导入默认的国际化（如果项目中使用多语言，则应该导入到 vue-i18n 中）
VXETable.setup({i18n: (key, args) => XEUtils.toFormatString(XEUtils.get(zhCNLocat, key), args)
})export function useTable (app: App) {app.use(Header).use(Icon).use(Column).use(Table)
}

src/main.ts

import { createApp } from 'vue'
import App from './App.vue'import { useTable } from './plugins/vxe-table'createApp(App).use(useTable).mount('#app')

按需打包后最小包只剩下 199 KB，体积大幅减少

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！