一、不生成sorce map文件

在 vue.config.js 中 设置 productionSourceMap 为 false
将此项关掉后，打包过后的文件会小一倍

二、如果引用了组件库，设置按需引用

如果你的项目引用了组件库，开发环境可以无脑引入，生产环境一定要设置按需引用！

顺便记录一下我踩的坑

这里已腾讯的 TDesign 为例子

1. 安装TDesign

   npm i tdesign-vue-next

2. 使用插件进行按需引用

   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 导入进来

设置了按需引用后打包后的文件也会小很多