Vue-cli3 项目打包上线及优化策略

归来巨星

已于 2022-03-23 15:37:56 修改

阅读量654

点赞数 2

分类专栏：打包模块文章标签： vue node.js webpack npm 前端

于 2020-04-30 02:10:24 首次发布

本文链接：https://blog.youkuaiyun.com/clli_Chain/article/details/105851690

版权

打包同时被 2 个专栏收录

5 篇文章

订阅专栏

模块

4 篇文章

订阅专栏

本文详细介绍了Vue项目从构建到优化的全过程，包括利用Vue-cli快速搭建项目、使用CDN和懒加载减小项目体积、后台gzip压缩以及使用pm2进行项目部署。通过这些步骤，有效提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一、Vue-cli是什么，及什么是打包。

1.1 vue-cli是什么？

vue脚手架指的是vue-cli，它是一个专门为单页面应用快速搭建繁杂的脚手架，它可以轻松的创建新的应用程序而且可用于自动生成vue和webpack的项目模板。

注意:也可以生成多页面哦！我们需要自己配置我们的vue.config.js 引入glog进行相应操作即可！

1.2 vue-cli 生成的命令

1 运行项目: npm run serve
2 打包: npm run build
3 查询语法: npm run lint //基于eslint语法
在这里插入图片描述

语句	作用
npm run serve	用类似于服务器的小进程将其代码启动起来
npm run build	将我们的对应的编写的代码，打包成一个或多个文件上线供客户使用
npm run lint	检查eslint语法错误，并尝试修复这些错误，但注意有些错误还是需要手动来修改

1.3 基于什么来进行打包

WebPack
webpack有对应的配置文件，那么我们的vue如果不想使用默认webpack配置，我们就需要在文件根路径创建一个vue.config.js来配置我们的打包信息，如修改入口文件，阻止本地加载…
在这里插入图片描述
在这个文件里面我们来写一些对应的配置信息

当然我在这里只是打个比方，如果要进行相关配置还是要查询对应的文档的。

1.4 vue-cli的图形化管理工具

在这里插入图片描述

二、项目的优化，体积缩小。

说到这里那么好，我想大家都应该清楚了什么是打包，
但是其实我们可以看到在上方是有警告的，那么警告是什么？
没错就是体积太大了，页面体积太大会造成什么后果？
页面阻塞，客户体验极其不友好！

那么这个时候我们就应该试着去缩小我们项目的体积
其实说到这里，我们应该想到一个点就是CDN节点的引入！

2.1 CDN节点以及本地加载

提及到这里就应该说到一个点，没错就是浏览器的并发机制
大部分浏览器对同一个域名用于下载文件的并发连接数限制在4个，这意味着如果要下载第五个文件就必须等前四个文件中有一个已经加载完成，假如前4个文件都很大，第五个文件就要等很久。
那么我们import引入数据，不仅会造成页面代码过多，如果数据很大，就会导致阻塞 //当然也会有好处
使用CDN节点则不会出现页面阻塞过慢，因为CDN都是处在不同域名下的各个节点
那么在这里
如果我们要在这里对我们的项目进行优化的话，就要使用我们的cdn节点来缩小我们的页面体积了

2.2 CDN节点的引入

在这里插入图片描述
没有使用cdn节点的项目大小
接下来我们来配置项目使用cdn来加载我们的项目

首先需要在vue.config.js中添加如下代码
在这里插入图片描述
因为我改了路径，并且使用的多文件，所以我们要找到对应的加载index文件，引入我们的cdn节点（3个页面，我全部引入了，如果是单页面，在public/index.html引入即可）

但是要注意，这个时候我们要把本地引入的element组件给注释掉
在这里插入图片描述
接下来我们进行打包查看体积
这样一看体积是不是小了非常多，那么客户再打开我们网页的时候，体验是不是会更好一些呢？

2.3 路由的懒加载

什么是路由的懒加载？
懒加载，闻呼其名，不用不加载。
说是不加载？其实不然，在路由这里我们要理解，就是将一个个路由对应的，可以将其分为一组组的js文件，分开之后，一个大的js文件，就分成了大大小小的小js文件，每当我们去请求对应组件时，就会去本地下载一个个小的js文件，虽然也是下载了，虽然他们和一个合起来的js一样大，但请注意，他们可是分开的哦，如果当前页面需要的js文件加载完了，那么是不是就会立即将页面显示出来呢？这样是不是也会对页面的加载进行一个小小的优化呢？我们可以来尝试一下

因为我们是babel配置
所以我们可以使用vue官网所说
在这里插入图片描述

npm install --save-dev @babel/plugin-syntax-dynamic-import

安装这个插件然后再babel.config.js中添加如下配置
在这里插入图片描述
如果我们要使用懒加载的话
则在对应的路由组件使用这种方式来引入我们的路由组件

打包后我们其实可以看到，这一个个的js文件其实就是我们所对应的一个个js路由组件

三、后台gzip压缩，优化，及pm2启动项目。

在这里插入图片描述
在这里我们使用express启动了服务器，下载并且依据上方更改完成代码后,即可测试，查看文件资源是否被压缩？

在这里我们使用PM2来启动我们的项目
在这里插入图片描述
启动之后，查看大小。

最后说一下PM2的常用语句

pm2其实就是一个类似于nodemon的一个工具，我们上线时推荐使用pm2

语句	作用
pm2 start 文件路径名 --name 名称	创建一个自定义名字的pm2进程
pm2 ls	查看当前所有进程和状态
pm2 stop id或者name	停止对应id或名称的进程
pm2 stop restart或者name	重启对应id或名称的进程
pm2 delete id或者name	删除对应id或名称的进程

那么好，到这里我们的项目也算是差不多优化好了。