外界有多纷扰，内心就有多丰饶 — 苏东坡

大家好，我是柒八九。

你能所学到的知识点

1. 碎碎念 推荐阅读指数 ⭐️⭐️⭐️⭐️
2. ChatGPT-3.5:高级搜索引擎 推荐阅读指数 ⭐️⭐️⭐️⭐️⭐️
3. NotionAI:文案助手 推荐阅读指数 ⭐️⭐️⭐️⭐️⭐️
4. Cursor:代码辅助 推荐阅读指数 ⭐️⭐️⭐️⭐️⭐️
5. Github Copilot 推荐阅读指数 ⭐️⭐️⭐️

好了，天不早了，干点正事哇。

---

碎碎念

本来呢，是有一篇关于Vite相关的文章的，然后针对当前比较热的AI技术用一小段，做一个简单的描述。但是在写的时候，发现越写越多，然后越写越来劲。索性，就把这段碎碎念单独写成一个文章。

下面是碎碎念的正文，先来一个狗头保命，下面的言论是我一家之言，不一定对。

就在最近，AI的大行其道，在技术圈掀起了空前绝后的热议。更有甚者，说这是一场技术革命。 技术更新迭代是很正常的事，革命本身就是一场去粗取精，去伪存真的过程。但是，我看到有些文章，过度将AI神话，说xx已死。这里我不否定AI带来的正面效应(可能在一些劳动密集型的应用场景下，会有翻天覆地的变化)，但是过度的制造技术噪音，让本来浮躁的时代，变的更加风雨飘摇。

由于，咱们是技术博客，然后更加关注的是技术维度的变化。在AI出来后，市面上就出现了一种论调 — xx已死，AI会替代所有。对于此，我是嗤之以鼻的。我还是很认同AI的出现，给前端/后端/运维/UI等技术维度带来了很多便利性的改变。但是，你如果说完全可以替换某个工作工种，我还是对此持保留意见。

正好，我们公司业务中，有一部分关于AI的应用和落地。秉承着没有调查，没有发言权的原则，我就来谈谈，我在使用AI后的心得体会。

从技术角度来思考AI，我们得出如下几点

1. AI是一个高级的搜索引擎，搜索结果更有目标性，换句话说，靶向性更高，不需要让你在繁杂的信息海洋中，基于搜索结果再次做二次搜索和筛选。
2. AI只是一个提效工具,它可以在一些重复性工作上，产生事半功倍的效果
3. AI是一个双刃剑，要想让AI产生你想要的效果，你要成为那个持剑人，而不是被刺者
   • 要想成为持剑人，你需要拥有明确的文本描述能力和对需要解决的问题有一个更深层次的认知，并且你需要完成主要的思考过程
4. 停止精神内耗，每次的技术革命(蒸汽技术(18世纪中)----电气技术(19世纪中)----信息技术(20世纪中)---智能技术(21世纪中))，它只会让效率提升，而不是全盘否定。
   • 如果你感觉到自己很危险，那为什么还不赶紧行动起来。就像本文开头所说：外界有多纷扰，内心就有多丰饶，你现在的所做的是，修炼内功，提升自身硬实力，而不是人云亦云。

---

下面，我就从我上手过的AI产品来印证我上面说的观点。

ChatGPT-3.5:高级搜索引擎

由于，这玩意太过于出名，我们就不做详细的介绍了。

贴一张来自官网的介绍。

划重点：ChatGPT的主要应用之一是在聊天机器人中，它可以用来提供自动客户服务，回答常见问题，甚至与用户进行更自由的对话。然而，它也可用于其他NLP应用，如文本总结、语言翻译和内容创作。

从上面划重点的文字中，我们是不是可以看出，这玩意是不是和浏览器有异曲同工之妙。只不过，你在浏览器中搜索指定内容，浏览器根据自己的搜索引擎做了一个数据分析，然后从网络中搜索相关的资源信息，然后把这些相关的信息，一股脑的都扔到你面前。（后面，打算写一篇，浏览器如何进行页面渲染全流程的文章，敬请期待）

比方说，现在想要搜索，前端学习路线。(这个关键词只是作为演示效果，如果想要获得更准确的信息，可以将关键字描述的更加准确)

使用浏览器搜索

下图是用Google搜索引擎得出的结果。

可以发现，采用浏览器搜索的路径就是

1. 个人思考（关键字，描述方式） + 搜索引擎
2. 返回相关资源池
3. 个人在资源池中二次搜索+分析
4. 检索出自己想要的结果

而上面最繁琐或者是耗时的操作就是第三步，你需要在资源池中进行二次搜索和加工。这其实最考验一个开发人员的信息检索能力。这其实就是需要经验和对应的知识储备了。

使用ChatGPT搜索

我们直接使用官方免费的搜索页面

可以发现，采用ChatGPT搜索的路径就是

1. 个人思考（关键字，描述方式）
2. 得到自己想要的结果(可能这个结果还是不太准确，你可以继续追问)

浏览器搜索引擎 VS ChatGPT

可以认为ChatGPT就是高级版本的搜索引擎，它可以省去了利用浏览器检索信息最麻烦的步骤–在资源池中进行二次搜索和分析。 让信息检索，变的更加的轻松。

上面的问题（前端学习路线），是一个开放性题目，一千个读者一千个哈姆雷特，这种答案不唯一，所以就需要搜索发起者拥有一定的信息鉴别能力和去伪存真的能力。

而如果搜索一下既定事实或者成熟的解决方案，可能利用浏览器和ChatGPT搜索出的结果，不会相差很多。

利用黑格尔的名言存在即合理。其实，ChatGPT的出现，并不是颠覆浏览器，而是相辅相成的。

我们可以简单的得出一个简单的结论：

浏览器搜索引擎让你可以繁杂的网络世界中，圈出一片知识领域，而ChatGPT就像一个网兜，可以在资源池中精准的捞出真正对你有用的资源信息。

---

NotionAI:文案助手

关于啥是Notion我这里就不过多介绍了。我们可以学以致用，让ChatGPT来回答你。如果你想体验一下Notion，你可以直接去官网搜索对你有用的部分。

而在OpenAI发布不久，Notion就接入了AI功能。下面是官网中针对AI部分的介绍。

下面我们检几条，我用过比较好的功能，来说明该工具对我们开发和应用的带来的好处。(更多好用的特性，需要各自体验)

NotionAI:你专属的翻译官

下面的这段话，就是官网介绍AI的。我们可以通过NotionAI中翻译功能，将其翻译成你想要的语言。

注意：上面有一个标注出错了，但是不影响行文的完整性，这里就作为一个彩蛋了。

下面就是AI翻译的结果。发现，NotionAI可以根据文本的上下文进行联想和匹配，让行文更加的流程。而不是像市面上其他常规翻译软件。只会生硬的进行文本的转换。

同时，在翻译的同时，还可以保证原有文本的样式信息不丢失。 比如，有些字体加粗，然后在翻译后也是有对应的样式信息。这样在插入后，就不用进行二次编译了。

下面，我们放一个其他翻译软件翻译刚才文本的结果。发现，有些词会显的很生硬，然后在翻译后，文本样式也丢失了。这就让人很奔溃。

---

NotionAI:草稿机器&头脑风暴

如果大家平时有写文章的习惯或者要在团队分享技术文章。用NotionAI写草稿，你会发现别有洞天。

例如，我现在要做一个关于Vite的文章分享或者对应的技术总结。

我们就可以这样做。

下面是NotionAI为我们生成的对应信息。（因为，我代理的是美国的ip，所以返回的结果为英文，其实还是可以直接返回中文信息的）

返回结果

这里附上对应的返回结果，也就当学习了。(后面我们会有专门针对Vite的优化文章，别急在写呢)

下面的内容，我就拿来主义了

为了优化Vite2，我们提出以下步骤：

1. 利用tree shaking来删除未使用的代码，减少bundle大小。
2. 实现懒加载，在需要时只加载必要的代码，减少初始加载时间。
3. 使用代码分割将bundle分成较小的块，可以分别并行加载，提高整体性能。(这里有彩蛋)
4. 优化图像和其他资产，减小其大小，提高加载时间。

步骤1：Tree Shaking

Vite2已经内置了对tree shaking的支持。为了启用它，我们需要在vite.config.js文件中配置rollupOptions，如下所示：

export default {
  rollupOptions: {
    output: {
      manualChunks: undefined,
    },
  },
};

步骤2：懒加载

要实现懒加载，我们可以使用import()函数在需要时动态加载模块。

这是一个例子：

const handleClick = async () => {
  const module = await import('./path/to/module.js');
  module.doSomething();
};

步骤3：代码分割(这是一个错误的示范)

注意，注意：这是一个错误的示范

其实在Vite中针对代码分割，是由其他的解决方案的。而不是像下面这种，利用splitChunks进行配置。采用splitChunks进行代码分割是Webpack的优化方式。

所以，在这里AI 它欺骗了你。

为了，让大家看清AI的嘴脸，我就把它返回的代码，贴到下面了，但是，但是，但是，重要的事情，说三遍，它是错误的。大家不要相信它。

可以通过在vite.config.js文件中配置splitChunks选项来实现代码分割。

这是一个例子：

export default {
  build: {
    minify: true,
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
    chunkSizeWarningLimit: 2000,
    chunkSizeOpts: {
      maxSize: 50000,
      minSize: 1000,
    },
    // Split chunks configuration
    splitChunks: {
      chunks: 'all',
      minSize: 1000,
      maxSize: 50000,
      minChunks: 1,
      maxAsyncRequests: 6,
      maxInitialRequests: 4,
      automaticNameDelimiter: '-',
      name: true,
      cacheGroups: {},
    },
  },
};

步骤4：资产优化

要优化资产，我们可以使用像imagemin这样的工具来压缩图像和其他资产。这是一个例子：

import imagemin from 'imagemin';
import imageminPngquant from 'imagemin-pngquant';

async function optimizeImage() {
  const files = await imagemin(['path/to/image.png'], {
    destination: 'optimized/images',
    plugins: [
      imageminPngquant({
        quality: [0.6, 0.8],
      }),
    ],
  });
}

ChatGPT vs NotionAI

正如上文介绍ChatGPT，它更像是一个高级搜索引擎，它可以对某个点的知识，进行精确化收集和整理。

而NotionAI的优势是，针对文本类型的文案信息，更好的进行二次加工。（翻译/提炼信息/头脑风暴）

对了，特别提醒下

1. NotionAI在你申请账号后，会免费给你使用次数或者token，但是如果次数或者token的用完了，就需要办会员了。
2. 就像上面针对Vite优化方案中的第三点，AI 它欺骗了你,所以，针对AI给予你的东西，你需要有一个去伪存真的过程。

---

Cursor:代码辅助

Cursor是个啥

遇事不决，ChatGPT。

下面，我们为了行文的方便，就只是简单举了几个比较简单的例子来讲解说明，其实AI的功能比这些都强大。

Cursor实战：命令AI为你生成指定的代码

其实，针对Cursor还可以写其他类型的语言。

1. html
2. css
3. rust
4. java
5. python
6. java

Cursor实战：操作代码片段

我们用cursor自动生成了一个用class表述的UI组件。

import React from 'react';

class ComponentUI extends React.Component {
  render() {
    return (
      <div>
        {/* Insert your React component here */}
      </div>
    );
  }
}

export default ComponentUI;

然后，AI就会将对应的代码准换成你想要的格式

Cursor实战：命令AI为你检查狮山并给出建议

function bad_Code(){
   let v1 = "前端柒八九";
    if(v1==='北宸'){
        console.log('北宸')
    }else if(v1 === '南蓁'){
        console.log('南蓁')
    }else if(v1 === '前端'){
        console.log('前端')
    }else if(v1 === '柒八九'){
        console.log('柒八九')
    }else {
         console.log('前端柒八九')
    }
}

这里就不贴代码了，我的示例只是简单的给AI下了一个比较模糊的指令。你也可以将指令明确话，比如：尝试优化该段代码，并换成swtich/case的形式等诸如此类的命令。

---

Github Copilot

目前 Github Copilot 已经集成到了 Visual Studio 、Jetbrains IDEs 中，功能也非常强大，但是收费，需要的同学可以自行了解、使用。

官方演示示例：

---

写在最后

就像该篇题目所言，AI不是终点，恰恰是起点。我们需要合理利用该特性，我们要顺势而为，而不是自怨自艾。

借用文章开头的话，来完结这篇文章 — 外界有多纷扰，内心就有多丰饶

望大家共勉。

---

后记

分享是一种态度

全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。

本文正在参加「金石计划」