通过以下命令可把vue-cli配置输出到指定文件
生产：vue inspect --mode production > env.prod.js
开发：vue inspect --mode development > env.dev.js
部分配置详情如下：
loader:
plugin：
在vue3默认配置中，有没有我们可以优化的部分呢？我们逐一排除。
首先，列出我们开发常用的loader配置，具体如下（当然也只是部分）
把vue3中loader默认配置和常用配置对比可知，常用配置多了file-loader和url-loader。那是不是说我们要新增url-loader对图片进行处理呢？
其实不需要的，vue3本身就通过“资源模块”来对资源进行处理，而无需引入其他loader配置（=> 资源模块 <=），以下截图是默认配置
配置中的type的类型值有4种
asset/resource: 发送一个单独的文件并导出URL。之前通过使用file-loader实现
asset/inline: 导出一个资源的data URL。之前通过使用url-loader实现
asset/source： 导出资源的源代码。之前通过使用raw-loader实现
asset： 在导出一个data URL和发送一个单独的文件之间选择。之前通过使用url-loader，并且配置资源体积限制实现。
如果我们想要自己引入url-loader，该怎么做呢？
下面是本人根据官网设置验证过的，仅供参考
除了默认配置，根据项目详情，我们还可以进行以下设置
1、抽离冗余的css设置，主要是引入插件：purgecss-webpack-plugin，可参考如下设置
2、压缩图片，引入插件：image-minimizer-webpack-plugin
依赖有点多：具体如下
image-minimizer-webpack-plugin 插件依赖imagemin ，两个都安装
npm i image-minimizer-webpack-plugin imagemin -D
安装无损压缩
npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
具体可参考如下设置
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
3、资源预先加载，引入插件：@vue/preload-webpack-plugin，具体可查考如下配置
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
4、最小化变更原则，优化资源更新。设置：runtimeChunk，具体可参考
script-ext-html-webpack-plugin这个插件也可实现差不多功能，可是webpack5已不再支持
5、生产打包去掉console，插件：babel-plugin-transform-remove-console，可参考如下设置
更改根目录下babel.config.js（babelrc）文件
6、模块分析，插件：webpack-bundle-analyzer，可参考如下设置
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
config
.plugin('analy')
.use(BundleAnalyzerPlugin)
.end()
热更替（略，已默认配置）
gzip（略）
externals条件值（略，防止将某些 import 的包(package)打包到 bundle 中，而是在运行时(runtime)再去从外部获取这些扩展依赖，已存在noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/，不需要）
本人菜鸡，有不对的地方请大佬多多留言指教！！不胜感激！！
