Mantine实战经验分享从零到一构建高效响应式界面

优化前：卡得不行

项目上线后，用户反馈说页面加载慢得像蜗牛，我一测，果然，首页加载时间居然达到了5秒。这可不行，用户体验太差了。Mantine本身是一个非常强大的UI库，但如果不注意性能优化，很容易就卡成狗。

找到病根了！

首先，我用Chrome的开发者工具（F12）看了下网络请求和性能分析，发现几个问题：

• 大量不必要的CSS和JS文件加载
• 图片资源过大，没有压缩
• 组件渲染时有大量的DOM操作

定位到这些问题后，就开始着手优化了。

优化方法：从代码入手

试了几种方案，最后这个效果最好。

CSS和JS文件优化

首先，我看了一下项目的构建配置，发现我们使用了Webpack来打包。于是，我调整了Webpack配置，将不必要的CSS和JS文件剔除，并且启用了代码分割和懒加载。

优化前的webpack配置：

module.exports = {
  // 其他配置...
  optimization: {
    splitChunks: {
      chunks: 'all',
    },
  },
};

优化后的webpack配置：

module.exports = {
  // 其他配置...
  optimization: {
    splitChunks: {
      chunks: 'all',
      minSize: 10000,
      maxSize: 0,
      minChunks: 1,
      maxAsyncRequests: 5,
      maxInitialRequests: 3,
      automaticNameDelimiter: '~',
      name: true,
      cacheGroups: {
        vendors: {
          test: /[\/]node_modules[\/]/,
          priority: -10,
        },
        default: {
          minChunks: 2,
          priority: -20,
          reuseExistingChunk: true,
        },
      },
    },
  },
};

通过这些配置，我们减少了初始加载的资源大小，提高了页面的响应速度。

图片压缩

其次，针对图片资源过大的问题，我使用了imagemin插件来压缩图片。这个插件可以自动压缩项目中的图片文件，大大减少了图片的大小。

安装插件：

npm install imagemin --save-dev

配置脚本：

const imagemin = require('imagemin');
const imageminMozjpeg = require('imagemin-mozjpeg');

(async () => {
  const files = await imagemin(['src/images/*.{jpg,png}'], {
    destination: 'dist/images',
    plugins: [
      imageminMozjpeg({ quality: 80 }),
    ],
  });
  console.log(files);
})();

通过这个脚本，我们将图片进行了压缩，进一步减少了加载时间。

减少DOM操作

最后，我检查了组件的渲染逻辑，发现有些组件在初始化时进行了大量的DOM操作。我改写了这些组件，尽量减少不必要的DOM操作，使用虚拟DOM来提高性能。

优化前的组件代码：

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    const element = document.createElement('div');
    element.textContent = 'Hello, World!';
    document.body.appendChild(element);
  }, []);

  return <div>My Component</div>;
}

优化后的组件代码：

import { useEffect } from 'react';
import { createPortal } from 'react-dom';

function MyComponent() {
  return (
    <>
      <div>My Component</div>
      {createPortal(<div>Hello, World!</div>, document.body)}
    </>
  );
}

通过使用createPortal，我们减少了直接操作DOM的次数，提高了组件的渲染性能。

性能数据对比

经过这一系列的优化，再次测试页面加载时间，从原来的5秒降到了800毫秒。用户体验得到了极大的提升，用户反馈也变得正面了许多。

• 首页加载时间：从5s降到800ms
• 资源大小：从1.5MB降到400KB
• DOM操作：减少了70%

总结

以上是我的优化经验，希望对你有帮助。如果大家有更好的优化方案，欢迎在评论区交流。