记一次项目优化

工作时空闲时间想看看项目整体引入了哪些第三方包，项目本身基于vue-cli + vue3的技术栈。

首先先安装下webpack的插件: npm i webpack-bundle-analyzer

随后在 vue.config.js 文件里添加一下配置:

  const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  configureWebpack: config => {
    config.plugins.push(new BundleAnalyzerPlugin())
  },

然后执行命令： npm run build:dev --report

根据项目在本地的运行情况，发现chunk-vendors 文件占了包8.9M的内存:

发现 chunk-vendors 文件除了 eruda 和 vconsole 两个不影响生产环境的库, element-plus 相关占用了大量空间，但实际项目里只用了 el-tree 控件。

随后排查代码发现项目内挂载无限滚动组件:

import InfiniteScroll from "element-plus"
const app = createApp(App)
app.use(InfiniteScroll)

但整个项目内却并未使用该组件，遂去除（因为是整个引入element包，而不是按需引入，正确应该是如下）

import { ElInfiniteScroll } from 'element-plus'  
const app = createApp(App)
app.use(ElInfiniteScroll)

造成了引入整个element-plus库，打包体积白白增大

去除后体积缩小一半多，页面加载速度也变快:

实际乍一看还有下面这些大文件，例如echart的整体引用和一个储存了中国地理位置相关数据的json文件，还有其他地方同时引用 element-plus 的icon库以及其他可以优化的地方，后续更新

第一次发文，仅做一次记录 `