问题：
- 按需加载比全部引入打包之后的体积要大
- 打包之后的体积很大
- 具有映射文件
- 去掉控制台打印
- 打包警告
处理映射文件
在打包过程中生成的 .map 文件是源代码映射文件，它们帮助你在浏览器的开发者工具中调试时对应到原始源代码，而不是经过编译、压缩后的代码。如果你确定不需要这些映射文件（例如，为了减小发布包的大小或出于安全考虑），可以在打包配置中将其关闭。
在 Vue CLI 使用的 Webpack 配置中，你可以在 vue.config.js 文件里调整生产环境的配置来移除 .map 文件的生成。以下是具体做法：
1// vue.config.js
2module.exports = {
3 configureWebpack: config => {
4 if (process.env.NODE_ENV === 'production') {
5 // 在生产环境下修改配置以移除 source map
6 config.devtool = false; // 关闭 source map
7 }
8 },
9 productionSourceMap: false // 这行也可以直接控制生产环境是否生成 source map，默认为 true，改为 false 则不生成
10};
config.devtool = false; 这行代码直接在生产环境的 Webpack 配置中禁用了 source map 的生成。productionSourceMap: false 是 Vue CLI 配置中的一个选项，直接控制是否在生产构建时生成 source map，默认是true，将其设为false 后，构建时将不会产出.map 文件。
通过上述任一方法，你就可以在打包你的 Vue 2 组件库时去掉 .map 文件了。
去掉打印
为了在打包组件库时移除console语句，你需要在vue.config.js中加入TerserPlugin的配置来优化生产环境的构建结果。请参考以下修改后的配置：
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
// 修改 src 目录 为 examples 目录
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html",
},
},
// 强制内联CSS（使用组件时，不需要再引入css）
css: {
extract: false,
},
// 别名
// 别名配置通过 configureWebpack
configureWebpack: {
resolve: {
alias: {
"@": path.resolve(__dirname, "examples"), //配置src目录的别名
"components": path.resolve(__dirname, "examples/components"), //配置公共组件目录的别名
"~": path.resolve(__dirname, "packages"),
},
},
// 添加 optimization 配置以使用 TerserPlugin 去除console
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true, // 移除console.*
},
},
}),
],
},
},
productionSourceMap: false, // 不生成生产环境的source map
};
这段代码中，我增加了optimization配置项，并在其下设置了minimizer，通过TerserPlugin来压缩代码并移除所有console.*调用。记得在项目中安装terser-webpack-plugin：
npm install terser-webpack-plugin --save-dev
或者，如果你使用的是Yarn：
yarn add terser-webpack-plugin --dev
这样配置后，当你构建生产版本时，控制台打印语句就会被自动移除了。
同时代码体积也减少了很多
处理打包报错
const path = require("path");
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
// 修改 src 目录 为 examples 目录
pages: {
index: {
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html",
},
},
// 强制内联CSS（使用组件时，不需要再引入css）
css: {
extract: false,
},
// 别名配置
configureWebpack: {
resolve: {
alias: {
"@": path.resolve(__dirname, "examples"),
"components": path.resolve(__dirname, "examples/components"),
"~": path.resolve(__dirname, "packages"),
},
},
// 添加 optimization 配置以使用 TerserPlugin 去除console
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
},
},
}),
],
},
// 处理 Asset Size Limit 警告
performance: {
hints: false,
maxAssetSize: 300000,
maxEntrypointSize: 300000,
},
},
productionSourceMap: false, // 不生成生产环境的source map
};
第一个问题暂未解决，后面在研究
如果您发现有其他问题请随时联系，本人技术有限，如有错误请指正
