cli组件分离js的简单介绍
更新:<time datetime="2022-11-18 07:09">2022-11-18 07:09</time>
本文目录一览:
- VueCLI3打包优化--抽离依赖包
- vue cli app.js文件过大怎么办
- vuecli搭建前端,nodejs怎么搭建后端
- 手把手教你使用nodejs编写cli(命令行)
- 关于Vue-cli引入外部js资源文件失败的一点思路
- 使用vue-cli生成的vendor.js文件太大,有办法减少体积吗
VueCLI3打包优化--抽离依赖包
项目开发中,使用了很多依赖包,如 Vue 、路由管理 Vue-router 、状态管理 Vuex 、UI组件库( ElementUI 、 Vant )、图表( echarts )等。打包构建,发现有一些包体积过大,会影响首页加载速度。如下所示: 从上图的分析包中,可以将以下插件抽离: 需要删除的依赖包 VueCLI3自带了 webpack analzer ,可通过如下命令即可生成分析包内容,在 dist/report.html 更多请查看: 减少打包体积、加快打包速度,常规的优化有以下两种: 按需加载是通过只引用使用的组件来减少体积,这就会有一个问题:如果项目重度依赖第三方插件(如 ElementUI 、 vant ),那么此方案将无法减少打包的体积。 这里选择CDN的方式, 配置流程 : 可根据环境变量,仅在线上采取使用CDN,开发环境直接使用npm依赖包即可。 进行包分离以后,打包结果: vue.config.js 的pages为: 修改如下的地方: 外部扩展(externals) 使用webpack的externals来指定echarts无法减少包的大小 vue-cli利用webpack-bundle-analyzer分析构建产物
vue cli app.js文件过大怎么办
这里的组件化开发是使用什么?? vue-loader么... 如果是vue-loader可以通过 require来引入就可以 比如Js文件写到assets/js中 在main.js中可以 require('./src/assets/xxx.js') 如果只是单页面html,可以直接引入就行了
vuecli搭建前端,nodejs怎么搭建后端
- 安装node,vue运行需要基于npm一定的版本,所以首先升级npm到最新的版本,而在安装的过程中个人比较喜欢淘宝的镜像,所以先安装cnpm(因为速度和稳定性都比较好)
- 在目标文件夹下打开终端
- 执行cnpm install vue-cli -g 全局安装 运行vue查看安装是否成功
- 运行vue init webpack(注:模板名称) sell2(注:项目名称)
- 进入项目文件夹下执行 cnpm install 来安装下载到模板中的package.json中的依赖,安装完成后会在项目文件夹下自动生成node-module文件来存放安装的依赖文件
- 由于依赖项非常的多编辑器在检索module文件时会非常的耗内存,所以在用webstorm编辑器启动项目的时候我们往往会在node-module文件夹右键去阻止检索该文件 注:webstorm一打开就卡死了,没办法操作文件夹这种情况的解决方法为,首先在文件夹形式下打开删除node-modules文件夹,然后进行阻止检索的方法,然后在重新cnpm install就好*(这种方法需要安装完依赖项先运行一次然后删除node_modules子文件,webstorm打开项目,禁止检索node_ module文件夹,然后在删除该文件夹,重新安装即可)
- 运行项目执行 npm run dev (注:此时不能用cnpm来运行,必须是npm)
- 将需要的资源放进项目
- 我们需要用到路由功能 所以需要安装vue-router 安装方法:vnpm install vuve-router --save
- 在build/devs-erver.js下编写自定义变量和路由功能 这样在运行项目下就可以得到自己想要的json数据, 这样路由就配置成功,并且得到了自己想要的数据
- 在写代码之前现在html文件下引入初始化样式(保持样式的统一和美观)
- 调用组件的方式
手把手教你使用nodejs编写cli(命令行)
前端日常开发中,会遇见各种各样的cli,比如一行命令帮你打包的webpack,一行命令帮你生成vue项目模板的vue-cli,还有创建react项目的create-react-app等等等等。这些工具极大地方便了我们的日常工作,让计算机自己去干繁琐的工作,而我们,就可以节省出大量的时间用于学习、交流、开发、 逛steam 。 但是有时候一些十分特别的需求,我们是找不到适合的cli工具去做的。比如说,你的项目十分庞大,你给项目添加一个新的路由,要经过 创建目录 - 创建.vue文件 - 更新vue-router的路由列表 这一趟流程,就算快捷键创建目录文件用得再熟悉,也比不过你一行命令来得快,特别是路由目录嵌套深,.vue文件初始化模板复杂的时候。 所以呢,何不为自己项目写一个cli?就专门做这些繁琐的活? nodejs的cli,本质就是跑node脚本嘛,基本上每位前端er都会: 然后命令行调用 可以做得更逼真一点,我们在package.json里面的scripts字段上添加一下脚本名: 然后命令行调用: 但是,看到这里你肯定会说,人家webpack还有vue-cli都是“有名字”的!什么 vue-cli init app 、 webpack -p 的,多漂亮,看看这个命令行, node index.js ,还 npm run hello ,谁不会啊,丑不拉几的,怕又不是来水文章的哦?差评!! 别急啊各位大人,接下来就说说,如何给这个node脚本起个名字。 姑且,先把这个cli的名字命名为 hello-cli ,就是我们能够在命令行里面,输入 hello-cli ,然后它就打印一句 hello world ,没有 node 也没有 npm ,就是: 这样,你的第一个cli脚本就成功安装了,可以在命令行里面,直接敲你的cli名字,看看结果输出吧。 另外,如果你仅希望你的cli脚本仅在项目里执行,则需要在你项目里面新建一个目录,重复上述的操作,只是在第三步的时候,不要llink到全局里面去,而是使用 npm i -D file:你的脚本cli目录路径 ,把它当成项目的依赖安装到node_modules里面去,如果安装成功,那么在项目的package.json你会看到多了一条依赖,这条依赖的值不是版本号,而是你脚本的路径。然后在node_modules里面会有一个.bin目录,里面就存放着你的可执行文件。 当然,这样安装的cli脚本,必须在项目的package.json的scripts字段上声明脚本命令,然后通过 npm run 的方式执行。 哦?这样子使用的话不就回到最最最开始的时候那种原始的 npm run hello 一样么。 是的,但是有质的区别。使用 node index.js 这种方式调用的话固然简单灵活,但是严重依赖脚本路径,一旦目录结构发生变动,写在scripts的命令就要更改一次;但是使用npm安装之后,本地的cli脚本就被拉到node_modules里面,目录结构变动对其影响不大。其次是不利于分享与发布,如果你想把你的cli脚本发布出去,那么有一个好听响亮的名字,比起在说明文档里面告诉使用者如何找到你的脚本路径再用node执行它,简直好上那么一万倍不是么? 这里也给我们提供了一个cli开发流程思路: 名字有了,输出也有了,看看我们跟那些大名鼎鼎的cli工具,在形式上还差点啥?对了,人家可以支持不同参数选项的,还可以根据输入的不同,产生不同的结果。 这样吧,我们给这个cli加一个功能,既然叫 hello-cli ,那不能只会 hello world 吧,必须要见谁就说 hello 才行: 虽然这个功能很简单,但是至少也是实现了“根据输入的不同,产生不同结果”的效果。 命令行上的参数,可以通过 process 这个变量获取, process 是一个全局对象而不是一个包,不需要通过 require 引入。通过 process 这个对象我们可以拿到当前脚本执行环境等一系列信息,其中就包括命令行的输入情况,这个信息,保存在 process.argv 这个属性里。我们可以打印一下: 打印结果: 可以看出,argv是个数组,前两位是固定的,分别是node程序的路径和脚本存放的位置,从第三位开始才是额外输入的内容。那么实现上面的功能就很简单了,只要读取argv数组的第三位,然后输出出来就可以了。 npm社区中也有一些优秀的命令行参数解析包,比如 yargs ,tj的 commander.js 等等 如果你想使用比较复杂的参数或者命令,建议还是用第三方包比较好,手写解析太耗精力了。 现在,你可以自由自在的写你自己的cli脚本了。 如果你希望写一个项目打完包自动推上git的cli,或者自动从git仓库里面拉取项目启动模板,那么,你需要通过node的 child_process 模块开启子进程,在子进程内调用git命令: 不仅是git命令,包括系统命令、其他cli命令都可以在这里执行。特别是系统命令,使用系统命令对文件目录进行操作,效率比fs高到不知道哪里去了。 社区上也有一些不错的包,比如阮一峰老师推荐的 shelljs 如果你不那么希望你的cli用起来那么“硬核”,希望更人性化一点,比如提供一些友好的输入、提示啊,给你的输出加点颜色区分重点啊,写个简单的进度条啊等等,那么你就需要美化一下你的输出了。 除了颜色这部分,不使用第三方包实现起来非常繁琐复杂,其他的功能,都可以试试自己写。 颜色部分使用了第三方包 colors ,这里就不演示了。 其他都是由nodejs自带的 readline 模块实现的。 绘制的思路跟canvas绘制动画一样,只不过canvas是清除画布,而命令行这里是通过 readline.clearScreenDown 清除输出。 这样,一个简易的,人性化的,带点点进度条动画的命令行cli工具就写好了,你也可以发挥你的想象力,去写一些更有趣的效果出来。 毕竟我们前端,有浏览器我们可以写动画,没了浏览器我们一样可以写动画。
关于Vue-cli引入外部js资源文件失败的一点思路
首先申明我是window系统下Vue-cli 4.5.3版本,脚手架整体基于vue2内核。 1.正常js文件如果有使用export向外暴露对象,将js放在src/assets都是可以通过import直接引入。但有有些情况下我们需要导入第三方的js文件,例如近期我在做的阿里云点播视频上传SDK,包括最近在学习的ThreeJs,如果单单只是在public中index.html通过script src=""/script引入,是不够的还需要在具体vue页面引入: 这也是我尝试两天才成功,走了些弯路,希望帮助到有同样问题的打工人,共勉!
使用vue-cli生成的vendor.js文件太大,有办法减少体积吗
首先,在写 Vue 的时候,应该采用懒加载模式,之后生成的包,就会被打入到不同分组的 js,运行时按需加载,详情见:Vue-路由懒加载;这个意义重大! 其次,可利用,webpack.DllReferencePlugin webpack.DllReferencePlugin 将常用不怎么变更的文件,打入一个统一的文件,外链使用。这个主要作用也可用来缩小包构建的时间;这个网上教程蛮多,就不赘述。也可参见这个项目 jade-blog 来配置;这一步即是你通过配置将部分库抽离出来,打包成另外的文件。 再次,可以利用 webpack-bundle-analyzer 可以分析打包后生成的文件结构,十分牛掰(最新 Vue-cli 带有此配置);在 package.json 中配置如下命令 npm run analyz,运行即可查看之:
"analyz": "NODE_ENV=production npm_config_report=true npm run build"