vite打包element-plus 优化

以下是一些在代码上配置优化 element-plus 体积的方式。

按需加载 可以使用 babel-plugin-import 等工具实现按需引入。具体而言，在项目中安装 babel-plugin-import，并在 .babelrc 文件中进行相关配置：

{
  "plugins": [
    ["import", {
      "libraryName": "element-plus",
      "customStyleName": (name) => {
        return `element-plus/lib/theme-chalk/${name}.css`;
      }
    }]
  ]
}

该配置会将所有组件按照需要进行动态导入，避免将整个库都打包进去造成的代码冗余和体积膨胀。

Tree Shaking 由于 Vite 默认支持 ES6 模块的 Tree Shaking 功能，因此只需要确保 element-plus 的代码结构是符合标准的 ES6 模块化规范的即可实现 Tree Shaking。具体而言，可以在 .eslintrc.js 文件中添加以下配置：

module.exports = {
  rules: {
    'no-restricted-imports': [
      'error',
      {
        paths: [
          {
            name: 'element-plus',
            importNames: ['Message'],
            message: 'Please use a dynamic import instead'
          }
        ]
      }
    ]
  }
}

这个配置会检查应用中是否有不合法的静态导入，如果发现了就给出警告并提示使用动态导入。

分离公共代码 可以使用 Vite 提供的 SplitChunks 插件来分离公共代码。在 vite.config.js 文件中添加以下配置：

export default {
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          'element-plus': ['element-plus']
        }
      }
    }
  }
}

这个配置会将 element-plus 单独打包成一个 chunk，然后在应用中使用异步加载的方式引入，避免重复打包公共代码，从而降低整体体积。

压缩和混淆代码 可以在 Vite 应用的根目录下创建一个 vite.config.js 文件，在其中启用 UglifyJS 插件等压缩和混淆代码的工具。具体而言，可以使用以下配置来启用 UglifyJS 插件：

import { defineConfig } from 'vite';
import { uglify } from 'rollup-plugin-uglify';

export default defineConfig({
  build: {
    rollupOptions: {
      plugins: [
        uglify()
      ]
    }
  }
});

此外，还可以考虑对代码进行 gzip 压缩或使用 Brotli 等更高级的压缩算法，以进一步减小代码体积。