vue 打包优化,vue视频压缩
网站的响应速度与用户体验密切相关，直接影响用户是否愿意继续访问你的网站。因此，本文主要介绍Vue项目打包、合并、压缩的相关信息，以优化网站的响应速度。有需要的可以参考一下。
目录
前言1。请求的内容太大
解决方案：CDN引入压缩请求资源。1.太多http请求
解决方案：摘要
前言
影响网页响应速度的因素有很多，比如：请求内容过多、http请求过多、服务器本身处理时间过长、JS脚本执行时间过长、浏览器回流重绘等。网站的响应速度与用户体验密切相关，直接影响用户是否愿意继续访问你的网站。对于Vue项目，最常见的问题可能是打包的文件太大，导致加载时间过长。服务器处理时间过长，js脚本执行时间过长。这两个因素与代码质量和服务器配置关系太大，需要根据具体项目和代码进行优化。今天我们只从请求数量和打包后超大单个文件两个方面来优化网页的响应速度(这个适用于所有前端项目)。
一.请求内容太大
项目打包后，我们经常会发现打包的文件厂商和app文件都特别大。app.js文件包含项目中每个页面的逻辑代码，vendor.js包含每个页面的每个组件共有的一些代码。随着项目复杂度的增加，这个文件的大小也在增加。在带宽有限的情况下，下载这两个文件往往需要很长时间。
解决方案：
惰性加载：划分代码块
Vue支持异步组件，即在使用组件的地方可以使用一个Promise，Promise最终会通过resolve返回一个组件对象。webpack的动态导入模式可以将代码分块打包，并返回一个承诺(正是异步组件所需要的)。在路由配置表中使用import，可以将每个页面组件分成不同的代码块，然后在访问路由时加载相应的组件，避免了将所有内容打包成一个组块，从而“按需加载”，大大提高了响应速度。如下图所示介绍路由组件：
CDN引入
业务代码经常被更新和迭代。为了让浏览器尽可能长时间缓存我们的静态文件，如果把类库代码和业务代码打包在一起，类库代码会随着业务代码的更新而更新，而不是长时间使用浏览器中的缓存。我们想用缓存来减少浏览器流量，提高用户浏览器的加载速度，所以把它单独拆分打包。一般第三方包都会有一个脚本导入方案，只需要在打包的时候忽略第三方包的提法，然后在模板中添加相应的导入链接即可。
首先，不需要在项目根目录下创建vue.config.js。
具体代码如下：
const cdn={
//忽略打包的第三方库
外部：{
Vue:“Vue”，
元素-ui :元素，
“vue路由器”:“vue路由器”，
Vuex:“Vuex”，
axios:“axios”，
瞬间：“瞬间”，
埃查尔兹：“埃查尔兹”
},
//通过cdn使用
js: [
https://cdn . bootcss . com/vue/2 . 6 . 10/vue . runtime . min . js ，
https://cdn . bootcss . com/vue-router/3 . 1 . 2/vue-router . min . js ，
https://cdn . bootcss . com/vuex/3 . 1 . 1/vuex . min . js ，
https://cdn . bootcss . com/axios/0 . 19 . 0/axios . min . js ，
https://cdn . bootcss . com/moment . js/2 . 24 . 0/moment . min . js ，
https://cdn . bootcss . com/echarts/3 . 7 . 1/echarts . min . js ，
https://cdn . bootcdn . net/Ajax/libs/element-ui/2 . 8 . 2/index . js ，
],
CSS:[ https://UNP kg . com/element-ui @ 2 . 8 . 2/lib/theme-chalk/index . CSS ]，
}
模块.导出={
public path:“/CRM/dist/”，
//publicPath:“”。/,
chainWebpack: config={
config.plugin(html )。tap(args={
参数[0]。cdn=cdn
返回参数
})
config.plugins.delete(预取)
},
//打包忽略第三方库
configureWebpack: {
外部：cdn.externals
},
}
然后，添加(自行添加位置)到pulic/index.html模板的相应位置。
//下面是CSS。如果是css，脚本，修改注释。仔细看就很好理解了。config配置是添加一个cdn变量，然后在模板中添加。
% for(htmlwebpackplugin . options . cdn中的变量I htmlwebpackplugin . options . cdn . CSS){ %
link href= %=htmlwebpackplugin . options . cdn . CSS[I]% rel= external no follow rel= style sheet
！-script src= %=htmlwebpackplugin . options . cdn . js[I]% cross origin= anonymous /script-
% } %
使用CDN的另一个好处是可以提高打包速度。
压缩请求资源
一般我们部署到服务器时，会使用nginx作为代理服务器，所有请求都会通过nginx转发。我们可以通过配置nginx来打开gzip。
服务器{
gzip打开；
gzip_types文本/普通应用/javascript应用/x-javascript文本/javascript文本/xml文本/CSS；
}
有了上面的配置，浏览器每次向服务器请求资源，服务器都会先压缩资源再返回给浏览器，浏览器收到后会解压。这样可以大大提高静态资源的下载速度。
但是还有一点，就是每次浏览器向服务器发出请求，服务器都会进行一次压缩操作。当请求量较大时，压缩操作也会影响服务器的响应速度，所以我们可以在打包时直接将文件打包成压缩包。这样，服务器不需要频繁打包：
依赖：压缩-web pack-插件
npm安装压缩-web pack-插件-保存-开发
vue.config.js已修改：
const compression plugin=require( compression-web pack-plugin )；
constproductionGzipExtensions=/\。(js CSS JSON txt html ico SVG)(\？*)?$/I；
模块.导出={
公共路径：“”。/,
productionSourceMap: false，
configureWebpack: {.},
chainWebpack: config={
config.resolve.alias.set(@ ，resolve( src )；
if(process . ENV . node _ ENV=== production ){
config . plugin(“compression plugin”)。使用(新的压缩插件({
文件名：[路径]。gz[查询]，
算法： gzip ，
测试：productionGzipExtensions，
门槛：10240，
最小比率：0.8，
deleteOriginalAssets: true
}));
}
},
};
Nginx配置
服务器{
gzip _ static on
gzip打开；
gzip_types文本/普通应用/javascript应用/x-javascript文本/javascript文本/xml文本/CSS；
}
一.http请求次数太多
凡事都有个度，也就是我们所说的物极必反。我们使用按需加载、代码分段和打包。当项目越做越大，模块越来越多。项目打包后，我们会发现会生成很多文件。对于前端性能来说，虽然每个文件更小，但可能意味着更多的网络连接建立和关闭的开销。所以在前端优化的实践中，通常需要平衡文件的数量和单个文件的大小。在这里，我们可以使用webpack提供的插件MinChunkSizePlugin，通过合并小于minChunkSize的块来保持块卷在指定的大小限制之上。
解决方案：
Vue.config.js配置
模块.导出={
公共路径：“”。/,
productionSourceMap: false，
configureWebpack: {
插件：[
new web pack . optimize . minchunksizeplugin({
minChunkSize: 10000 //最小字符数
})
]
},
}
通过以上操作，我们可以将打包的文件控制在合理的大小和数量范围内，再配合ngnix配置，打开gzip，基本可以解决大部分vue单页应用首次加载等待时间长的问题。
总结
关于Vue项目打包合并压缩优化网页响应速度的这篇文章到此为止。关于Vue项目打包、合并和压缩的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望你以后能支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。