按照官网的方式，在项目中按需引入 element-ui ,
用 webpack-bundle-anaylize 分析发现，打包输出了全量的 element-ui, 按需引入没达到想要的效果。
一步注释项目代码去查找造成全量引入的原因，发现是因为在组件中写了这样的语句：

  1. <script lang='ts'>
  2. import { Message } from "element-ui";
  3. Message.error("warn");
  4. </script>

当我把 <script lang='ts'> 改为<script lang='js'>后，发现element-ui会按需引入。
原因找到了，是因为 ts-loader对ts 处理后出现了问题。

解决

由于项目中同时使用了ts-loader 和 babel-loader，解决思路就是要么将 element-ui 按需引入的代码写到js中，要么修改tsconfig配置防止 ts-loader 编译 ESM语法。

有两种方式解决

  1. 把element 的按需导入代码写到一个单独 element.js文件中,并在 element.js 中导出 ，再在组件中引入这个文件
  2. 修改配置，升级babel 7, 使用 babel7 + @babel/preset-typescript

由于修改配置影响面比较广，先按照第一种方式解决。

后经查询 sf https://stackoverflow.com/questions/61236997/webpack-tree-shaking-still-bundles-unused-exports

发现只需要 ts 的module 配置 : 

  1. {
  2.         test: /\.tsx?$/,
  3.         exclude: /node_modules/,
  4.         use: [
  5.           'babel-loader'
  6.           , {
  7.             loader: 'ts-loader',
  8.             options: {
  9.               transpileOnly: true,
  10.               appendTsSuffixTo: [/\.vue$/],
  11.               happyPackMode: false
  12.             }
  13.           }],
  14.       },

不知道什么原理，但是解决问题了。