Vue项目打包,vuecli打包优化
项目完成后，我们将把项目上线。为了提高性能，我们经常会做一些优化。本文主要介绍vue项目打包和优化的实施步骤。有兴趣的可以看看。
目录
vue项目打包和在线优化Vue项目打包和托管项目的常见优化
vue项目的打包上线及优化
项目完成后，我们将把项目上线。为了提高性能，我们经常会做一些优化处理。
vue项目的打包
脚手架项目中有一个默认的打包命令，我们可以输入npm run bulid来打包项目。
打开终端，切换到项目根目录。
输入：npm运行构建
将在当前项目的根目录中生成一个dist文件夹，其中包含打包的文件。
项目托管
我们可以创建一个简单的节点服务器来托管打包的项目，这样我们就可以模拟项目访问服务器。
1.新建一个目录作为服务器的根目录，在小黑窗口执行node init -y初始化，然后执行npm i express下载express包，然后创建app.js文件复制下面的代码(用express包打开一个服务器)。
2.将刚刚打包生成的dist目录整体复制到节点服务器目录
3.资源在dist目录中，所以可以使用静态资源托管方法来提供资源，并使用dist目录作为资源托管目录。
快速创建服务器
var express=require(express )
const path=require(path )
//2.创建服务器
var app=express()；
//承载静态资源
//您也可以将所有静态资源放在指定的目录中，如public，然后添加以下配置
app.use(express.static(dist ))
app.use(/)，express . static(path . join(_ _ dirname， dist ))
//3.打开服务器并监听端口。
app.listen(3001，()={
console . log( http://127 . 0 . 0 . 1:3001 )
})
启动服务器
在服务器目录中打开终端，输入nodeapp.js。
在浏览器中输入服务器地址。
项目的常见优化
项目打包后，之前使用的部署依赖包和项目中使用的外部资源将被打包。
如果之前引入了很多包，或者引入了不必要的包，会增加项目的体量，导致用户需要请求更多的数据才能正常访问，不利于用户体验，所以需要优化打包过程。
总的来说，我们可以从优化代码方面来优化项目，也可以用类似cdn的方式来优化项目。
Scaffolding提供了一个命令，可以让我们看到项目的资源分布(占用)情况：npm run build - report。
生成项目报告文件
npm运行构建--报告
打开报告页面。
1.在报告页面中，块越大，该模板占用的体积就越大。
2.模块占用的体积越大，我们就应该考虑不把它装进产品里
加速cdn优化
CDN:CDN的本质是缓存媒体资源，动静态图片(Flash)，HTML，CSS，JS等。到离你更近的IDC，让用户可以共享资源，减少站点间的响应时间。网游加速器的本质是搭建高带宽机房，架设多节点服务器加速用户。
我们可以将一些大容量的模块发送到cdn，帮助我们提供相应的资源，这样可以缓解我们自己服务器的压力，提供更快更好的资源响应。
vue .配置. js
在脚手架项目中，如果要添加自己的项目配置，可以在根目录下添加vue.config.js文件，并在该文件中实现自定义配置。
包装时，这种配置将与脚手架的配置相结合。
排除添加的包
模块.导出={
configureWebpack: {
外部：{
vue: Vue ，
元素-ui :元素，
羽毛笔:羽毛笔
}
},
}
大家可以看到，打包的项目体量明显减少，但问题并没有解决。如果没有这些包，打包的项目将无法运行。
这是因为现在打包的项目中没有Vue包，所以会出现错误。现在我们需要用cdn来提供这些资源。
增加了cdn的用户定制
将以下代码添加到vue.config.js中
让cdn={
css: [
//元素-ui css
https://UNP kg . com/element-ui/lib/theme-challenge/index . CSS ，//样式表
//格式文本框插件样式
https://cdn . bootcdn . net/Ajax/libs/quill/2 . 0 . 0-dev . 4/quill . bubble . CSS
],
js: [
//vue必须先！
https://unpkg.com/vue/dist/vue.js ，//vuejs
//element-ui js
https://un pkg . com/element-ui/lib/index . js ，//elementUI
//格式文本框插件
https://cdn . bootcdn . net/Ajax/libs/quill/2 . 0 . 0-dev . 4/quill . js
]
}
通过插件自动向页面添加资源。
将资源挂载到插件
模块.导出={
//添加打包排除，表示以后不会将以下配置中的包打包到项目中
configureWebpack: {
外部：{
vue: Vue ，
元素-ui :元素，
羽毛笔:羽毛笔
}
},
//在插件上挂载cdn的资源
chainWebpack(配置){
config.plugin(html )。tap(args={
参数[0]。cdn=cdn
返回参数
})
}
}
使用插件在页面中添加指定的cdn资源，并将下面的代码(项目打包前的索引文件)添加到项目的public中的索引中。
添加css简介(在head结构中)
% for(htmlwebpackplugin . options . cdn . CSS的var CSS){ %
link rel= style sheet href= %=CSS % /
% } %
添加js简介(在正文结构中)
% for(htmlwebpackplugin . options . cdn . js的var js){ %
脚本src= %=js % /脚本
% } %
重新打包，好吗
Cdn仅用于设置产品阶段。
在项目开发中，实际上并不需要使用cdn，这样会降低我们的页面加载效率，也不适合本地开发(需要联网)。
我们可以根据环境变量来处理它。只有产品生产出来，插件才能自动将相应的资源文件注入到html页面中。
constitspod=process . env . node _ env== production //是生产环境吗？
let externals={
vue: Vue ，
元素-ui :元素，
羽毛笔:羽毛笔
}
让cdn={
css: [
//元素-ui css
https://UNP kg . com/element-ui/lib/theme-challenge/index . CSS ，//样式表
//格式文本框插件样式
https://cdn . bootcdn . net/Ajax/libs/quill/2 . 0 . 0-dev . 4/quill . bubble . CSS
],
js: [
//vue必须先！
https://unpkg.com/vue/dist/vue.js ，//vuejs
//element-ui js
https://un pkg . com/element-ui/lib/index . js ，//elementUI
//格式文本框插件
https://cdn . bootcdn . net/Ajax/libs/quill/2 . 0 . 0-dev . 4/quill . js
]
}
cdn=isProd？cdn : { css: []，js: [] }
externals=isProd？外部：{}
模块.导出={
//添加打包排除，表示以后不会将以下配置中的包打包到项目中
configureWebpack: {
外控者
},
//
chainWebpack(配置){
config.plugin(html )。tap(args={
参数[0]。cdn=cdn
返回参数
})
}
}
本文关于vue项目打包和优化的实施步骤到此为止。更多相关的vue项目打包和优化，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。