
前端小魔女
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不是终点,恰恰是起点
。我们需要合理利用该特性,我们要「顺势而为」,而不是「自怨自艾」。
借用文章开头的话,来完结这篇文章 -- 外界有多纷扰,内心就有多丰饶
望大家共勉。
后记
❝分享是一种态度
❞
「全文完,既然看到这里了,如果觉得不错,随手点个赞和“在看”吧。」

作者介绍

前端小魔女
微信公众号:前端柒八九