记一次管理系统的前端优化实践总结

背景：公司的后台管理系统存在严重的性能问题，大部分是接口请求时间过长导致，但前端也确实存在很大的问题。比如：

1. 未对状态进行缓存，而是不同组件多次调用同一个接口
2. 项目入口文件过大，首屏加载时间过长
3. vue路由被破坏，直接在路由拦截函数里面进行大量业务逻辑判断
4. 静态资源存储过大，有的图片甚至超过5M大小
5. 前端编码没有规范，node包随意引入。

step1 使用lighthouse测试首页

step2 使用webpack-bundle-analyzer生成依赖关系图

通过关系图进行依赖分析，查找是否存在不必要的前端包，是否存在功能相同的前端包。

经分析发现：

1. brace和wangeditor都是富文本工具，移除brace保留wangeditor，并对代码做相关迁移
2. 删除jquery。 项目中的jquery仅用来获取dom元素，且用到的地方很少

step3 删除本地element样式文件，改为引用node_module

step4 启用代码分割

1.动态导入组件

// 原入口文件中的同步导入
import ProductDetail from './components/ProductDetail.vue';

// 改为动态导入（按需加载）
const ProductDetail = () => import('./components/ProductDetail.vue');

2.配置webpack的SplitChunksPlugin

module.exports = {
  optimization: {
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        vendor: {
          test: /[\\/]node_modules[\\/]/,
          name: 'vendors',
          chunks: 'all',
        },
      },
    },
  },
};

3.提取公共资源

将 CSS、图片等非 JS 资源移出入口文件：

// 使用 mini-css-extract-plugin 提取 CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, 'css-loader'],
      },
    ],
  },
  plugins: [new MiniCssExtractPlugin()],
};

step5 压缩图片,标准如下

场景	图片大小限定标准	说明
​Banner 图	100KB - 300KB	大尺寸图片，需严格控制体积。
​产品展示图	100KB - 500KB	高质量图片，需平衡清晰度和体积。
​Logo	10KB - 50KB	小尺寸图片，体积应尽可能小。
​背景图	100KB - 300KB	大尺寸图片，需压缩至合理范围。
​图标	50KB - 200KB	将所有小图标放入雪碧图中或者使用icon

step5 引入pina作为状态管理工具，减少接口重复调用

step6 要求后端整合接口，减少前端的接口调用

优化后的结果

优化前，入口文件大小21.7M

优化后，入口文件大小7.89M, 优化率高达60%