实现自动引入+按需引入element-plus原来如此简单

实现自动导入+按需导入element-plus就这么简单等组件就好了。1.安装npm包npmiunplugin-vue-componentsunplugin-auto-import-D2。配置vue.config.js（这里是vuecli的配置方法，其他脚手架需要参考文档）constAutoImport=require('unplugin-auto-import/webpack')constComponents=require('unplugin-vue-components/webpack')const{ElementPlusResolver}=require('unplugin-vue-components/resolvers')module.exports={configureWebpack:{plugins:[AutoImport({resolvers:[ElementPlusResolver()],}),Components({resolvers:[ElementPlusResolver()],}),],}}3.具体使用app.vue4.确认是否按需导入首先安装webpack-bundle-analyzer插件，npminstall--save-devwebpack-bundle-analyzer然后执行如下命令：npmrunbuild--report不需要做任意配置，终端打印出包后可以看到每个文件的大小。如果想查看详细的打包文件信息，可以在vue.config.js中做如下配置：constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPlugin;module.exports={configureWebpack:{plugins:[newBundleAnalyzerPlugin()]}}然后打开地址http://127.0.0.1:8888。据我个人测试，完全导入后，打包后的chunk.js文件大小在400k左右。按需导入后，打包后的chunk.js文件大小约为200k。4.