前端小魔女
2023/04/06阅读：18主题：蔷薇紫
AI不是终点，恰恰是起点
❝外界有多纷扰，内心就有多丰饶 -- 苏东坡
❞
大家好，我是「柒八九」。
你能所学到的知识点
❝❞
碎碎念 「推荐阅读指数」 ⭐️⭐️⭐️⭐️ ChatGPT-3.5:高级搜索引擎 「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️NotionAI:文案助手 「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️Cursor:代码辅助 「推荐阅读指数」 ⭐️⭐️⭐️⭐️⭐️Github Copilot「推荐阅读指数」 ⭐️⭐️⭐️
好了，天不早了，干点正事哇。
碎碎念
本来呢，是有一篇关于Vite相关的文章的，然后针对当前比较热的AI技术用一小段，做一个简单的描述。但是在写的时候，发现越写越多，然后越写越来劲。索性，就把这段「碎碎念」单独写成一个文章。
下面是碎碎念的正文，先来一个「狗头保命」，下面的言论是我「一家之言，不一定对」。
就在最近，AI的「大行其道」，在技术圈掀起了「空前绝后」的热议。更有甚者，说这是一场「技术革命」。 技术更新迭代是很正常的事，革命本身就是一场「去粗取精，去伪存真」的过程。但是，我看到有些文章，过度将AI神话，说xx已死。这里我不否定AI带来的正面效应(可能在一些劳动密集型的应用场景下，会有翻天覆地的变化)，但是过度的制造「技术噪音」，让本来浮躁的时代，变的更加风雨飘摇。
由于，咱们是技术博客，然后更加关注的是技术维度的变化。在AI出来后，市面上就出现了一种论调 -- xx已死，AI会替代所有。对于此，我是「嗤之以鼻」的。我还是很认同AI的出现，给前端/后端/运维/UI等技术维度带来了很多便利性的改变。但是，你如果说完全可以替换某个工作工种，我还是对此「持保留意见」。
正好，我们公司业务中，有一部分关于AI的应用和落地。秉承着「没有调查，没有发言权」的原则，我就来谈谈，我在使用AI后的心得体会。
从技术角度来思考AI，我们得出如下几点
❝❞
AI是一个高级的「搜索引擎」，「搜索结果」更有目标性，换句话说，「靶向性」更高，不需要让你在繁杂的信息海洋中，基于搜索结果再次做二次搜索和筛选。AI只是一个「提效工具」,它可以在一些重复性工作上，产生「事半功倍」的效果AI是一个「双刃剑」，要想让AI产生你想要的效果，你要成为那个「持剑人」，而不是「被刺者」
要想成为「持剑人」，你需要拥有明确的 文本描述能力和对需要解决的问题有一个更深层次的认知，并且你需要完成主要的思考过程停止「精神内耗」，每次的技术革命( 蒸汽技术(18世纪中)----电气技术(19世纪中)----信息技术(20世纪中)---智能技术(21世纪中))，它只会让效率提升，而不是全盘否定。
如果你感觉到自己很危险，那为什么还不赶紧行动起来。就像本文开头所说：外界有多纷扰，内心就有多丰饶，你现在的所做的是，「修炼内功」，提升自身硬实力，而不是人云亦云。
下面，我就从我「上手过」的AI产品来印证我上面说的观点。
ChatGPT-3.5:高级搜索引擎
由于，这玩意太过于出名，我们就不做详细的介绍了。
贴一张来自官网的介绍。 
❝划重点：
❞ChatGPT的主要应用之一是在「聊天机器人」中，它可以用来提供自动客户服务，回答常见问题，甚至与用户进行更自由的对话。然而，它也可用于其他NLP应用，如文本总结、语言翻译和内容创作。
从上面划重点的文字中，我们是不是可以看出，这玩意是不是和浏览器有「异曲同工之妙」。只不过，你在浏览器中搜索「指定」内容，浏览器根据自己的「搜索引擎」做了一个数据分析，然后从网络中搜索相关的资源信息，然后把这些相关的信息，「一股脑」的都扔到你面前。（后面，打算写一篇，浏览器如何进行页面渲染全流程的文章，敬请期待）
比方说，现在想要搜索，「前端学习路线」。(这个关键词只是作为演示效果，如果想要获得更准确的信息，可以将关键字描述的更加准确)
使用浏览器搜索
下图是用Google搜索引擎得出的结果。 
可以发现，采用浏览器搜索的路径就是
❝❞
个人思考（关键字，描述方式） + 搜索引擎 返回相关「资源池」 个人在资源池中「二次搜索+分析」 检索出自己想要的结果
而上面最繁琐或者是耗时的操作就是第三步，你需要在资源池中进行二次搜索和加工。这其实最考验一个开发人员的「信息检索」能力。这其实就是需要经验和对应的知识储备了。
使用ChatGPT搜索
我们直接使用官方免费的搜索页面 
可以发现，采用ChatGPT搜索的路径就是
❝❞
个人思考（关键字，描述方式） 得到自己想要的结果(可能这个结果还是不太准确，你可以继续追问)
浏览器搜索引擎 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，我们提出以下步骤：
-
利用 tree shaking来删除未使用的代码，减少bundle大小。 -
实现懒加载，在需要时只加载必要的代码，减少初始加载时间。 -
使用代码分割将 bundle分成较小的块，可以分别并行加载，提高整体性能。(这里有彩蛋) -
优化图像和其他资产，减小其大小，提高加载时间。
步骤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的优势是，针对文本类型的文案信息，更好的进行「二次加工」。（翻译/提炼信息/头脑风暴）
对了，特别提醒下
❝❞
NotionAI在你申请账号后，会免费给你使用次数或者token，但是如果次数或者token的用完了，就需要办会员了。就像上面针对 Vite优化方案中的第三点，AI 它欺骗了你,所以，针对AI给予你的东西，你需要有一个「去伪存真」的过程。
Cursor:代码辅助
Cursor是个啥
遇事不决，ChatGPT。 
下面，我们为了行文的方便，就只是简单举了几个比较简单的例子来讲解说明，其实AI的功能比这些都强大。
Cursor实战：命令AI为你生成指定的代码
其实，针对Cursor还可以写其他类型的语言。
-
html -
css -
rust -
java -
python -
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不是终点，恰恰是起点。我们需要合理利用该特性，我们要「顺势而为」，而不是「自怨自艾」。
借用文章开头的话，来完结这篇文章 -- 外界有多纷扰，内心就有多丰饶
望大家共勉。
后记
❝分享是一种态度
❞
「全文完，既然看到这里了，如果觉得不错，随手点个赞和“在看”吧。」
作者介绍
前端小魔女
微信公众号:前端柒八九