一、不聚合sorce map文档
在 vue.config.js 中 增设 productionSourceMap 为 false 将该项清空后，装箱之后的文档会小三倍#web#
二、假如提及了模块库，设置按需提及
假如你的工程项目提及了模块库，合作开发自然环境能总之导入，制造自然环境很大要增设按需提及！别忘了历史记录呵呵我踩的坑
这儿已百度的 TDesign 为范例
加装TDesign
npm i tdesign-vue-next
采用应用程序展开按需提及
npm install -D unplugin-vue-components unplugin-auto-import
接着在 Webpack 或 Vite 相关联的命令行加进上述应用程序。
Vite
import AutoImport from unplugin-auto-import/vite;import Components from unplugin-vue-components/vite;import { TDesignResolver } from unplugin-vue-components/resolvers;export default { plugins: [ // AutoImport({ resolvers: [TDesignResolver({ library: vue-next })], }), Components({ resolvers: [TDesignResolver({ library: vue-next })], }), ],};
Webpack
const AutoImport = require(unplugin-auto-import/webpack);const Components = require(unplugin-vue-components/webpack);const { TDesignResolver } = require(unplugin-vue-components/resolvers);module.exports = { // plugins: [ AutoImport({ resolvers: [TDesignResolver({ library: vue-next })], }), Components({ resolvers: [TDesignResolver({ library: vue-next })], }), ],};
注意：采用了vue-cli 4.x 版本的构建的vue工程项目，和之前构建的不同，我们要在根目录创建一个 vue.config.js 的文档来展开 webpack 相关的配置
实例：
const AutoImport = require(unplugin-auto-import/webpack)const Components = require(unplugin-vue-components/webpack)const { TDesignResolver } = require(unplugin-vue-components/resolvers)module.exports = { // TDesign 按需提及 configureWebpack: { plugins: [ AutoImport({ resolvers: [TDesignResolver({ library: vue-next })] }), Components({ resolvers: [TDesignResolver({ library: vue-next })] }) ] }}
需要将 webpack 相关的内容写在 configureWebpack 内！(这也是我踩的坑)
增设了按需提及后，main.js 中能不展开模块库的 import 导入了，但是模块库的 css 还是需要 import 导入进来
增设了按需提及后装箱后的文档也会小很多
优化后文档大小：
举报/反馈
