Vue项目打包、合并及压缩优化网页响应速度


Posted in Vue.js onJuly 07, 2021
目录
  • 前言
  • 一.请求内容太大
    • 解决方案:
    • CDN引入
    • 压缩请求资源
  • 一.http请求次数太多
    • 解决方案:
  • 总结

 

前言

影响网页响应速度的因素有很多,例如:请求内容太大、http请求次数太多、服务器本身处理请求太久、JS脚本执行耗时过长、浏览器回流重绘等。网站页面的响应速度与用户体验息息相关,直接影响到用户是否愿意继续访问你的网站。对于Vue项目而言,最普遍的问题可能在于打包后的文件太大,导致加载时间过长。服务器请求处理太久和js脚本执行耗时过长,这两个跟代码的质量和服务器配置关系太重,需要根据具体的项目和代码进行优化,今天我们只从请求次数和打包后的单文件过大两个层面去优化网页响应速度(这个适用于所有前端项目)。

 

一.请求内容太大

在项目打包后,我们经常会发现打包后的文件 vendors 和 app 文件尤其过大,其中app.js文件里放的是项目中各个页面的逻辑代码,vendor.js放的是各个页面各个组件公用的一些代码。随着项目复杂度的增加,该文件的大小也与日俱增。在带宽有限的情况下,往往下载这两个文件就会等很长时间。

 

 

解决方案:

  • 路由懒加载:分割代码块

Vue支持异步组件,即可以在使用组件的地方使用一个Promise,Promise最终会通过resolve回传一个组件对象。而webpack的动态import的方式可以让代码分块进行打包,并且返回一个Promise(正是异步组件所需要的)。在路由配置表里使用import可以将各个页面组件分割成不同的代码块,然后当路由被访问的时候才加载对应的组件,这样就避免将所有内容打包在一个chunk里,从而“按需加载”,大大提高响应速度。如下图所示引入路由组件:

Vue项目打包、合并及压缩优化网页响应速度

 

CDN引入

业务代码是经常更新迭代的,为了让浏览器尽可能长的时间缓存我们的静态文件,如果把类库代码和业务代码打包在一起,那么类库代码会跟着业务代码的更新而更新,而不能长时间的利用浏览器里缓存。我们希望利用缓存,减少浏览器流量,提高用户浏览器加载速度,所以单独拆分出来进行打包。一般第三方包都会有script引入方案,只需要打包的时候忽略制定第三方包,然后在模板上加上相应的导入链接。

首先没有vue.config.js需要在项目根目录创建

具体代码如下:

const cdn = {
    // 忽略打包的第三方库
    externals: {
      vue: 'Vue',
      "element-ui": "ELEMENT",
      'vue-router': 'VueRouter',
      vuex: 'Vuex',
      axios: 'axios',
      moment: "moment",
      echarts: "echarts"
    },
  
    // 通过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://unpkg.com/element-ui@2.8.2/lib/theme-chalk/index.css"],
  }

module.exports = {
    publicPath: '/CRM/dist/',
    // publicPath: './',
    chainWebpack: config => {
        config.plugin('html').tap(args => {
            args[0].cdn = cdn
            return args
          })
          config.plugins.delete('prefetch')
    },
    //打包忽略第三方库
    configureWebpack: { 
        externals: cdn.externals
    },
}

然后在 pulic/index.html 模板相应位置上加上(添加位置自己看着来)

//下列是css ,script的话注释换一下,仔细看很好理解,config配置是添加一个cdn变量,然后在模板中遍历添加
 <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
    <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="external nofollow"  rel="stylesheet">
    <!-- <script src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" crossorigin="anonymous"></script> --> 
  <% } %>

使用CDN还会有另外一个好处,就是可以提高打包速度。

 

压缩请求资源

一般我们部署到服务器会使用nginx来做代理服务器,所有的请求都通过nginx转发。我们可以通过配置nginx,开启gzip。

server {
        gzip on;
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

通过上面的配置,每次浏览器向服务器请求资源时,服务器就会先把资源进行压缩后再返给浏览器,浏览器接收到后再解压处理。这样就可以很大的提高静态资源的下载速度。

但还有一点,就是这样的话,浏览器每次向服务器请求时,服务器都会执行一次压缩操作,当请求量很大时,压缩这个操作也会影响到服务器的响应速度,所以我们可以直接在打包时,就将文件打包成压缩包。这样不用服务器频繁的去打包:

安装依赖:compression-webpack-plugin

npm install compression-webpack-plugin --save-dev

vue.config.js修改:

const CompressionPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {...},
    chainWebpack: config => {
        config.resolve.alias.set('@', resolve('src'));
        if (process.env.NODE_ENV === 'production') {
            config.plugin('compressionPlugin')
            .use(new CompressionPlugin({
                filename: '[path].gz[query]',
                algorithm: 'gzip',
                test: productionGzipExtensions,
                threshold: 10240,
                minRatio: 0.8,
                deleteOriginalAssets: true
            }));
        }
    },
};

nginx配置

server {
        gzip_static on;
        gzip on;
        gzip_types text/plain application/javascript application/x-javascript text/javascript text/xml text/css;
}

 

一.http请求次数太多

所有的事情都有个度,也就是我们所说的物极必反。我们采用按需加载,代码分割打包后,当项目越来越大,模块越来越多的时候,项目打包后,我们就会发现会生成很多的文件。对于前端性能而言,虽然每个文件更小了,但可能意味着更多的网络连接建立和关闭的开销,因此在前端优化的实践中,通常需要在文件数量和单个文件大小之间取得平衡。这里,我们可以利用webpack提供的插件 MinChunkSizePlugin, 通过合并小于 minChunkSize 大小的 chunk,将 chunk 体积保持在指定大小限制以上

解决方案:

vue.config.js配置

module.exports = {
    publicPath: './',
    productionSourceMap: false,
    configureWebpack: {
        plugins: [
            new webpack.optimize.MinChunkSizePlugin({
              minChunkSize: 10000 // Minimum number of characters
            })
        ]
    },
}

通过以上这些操作,我们可以将打包后的文件控制在合理的大小和数量范围之内,再配合ngnix配置,开启gzip,基本上就可以解决大部分vue单页面应用,首次加载等待时间过长的问题。

 

总结

到此这篇关于Vue项目打包、合并及压缩优化网页响应速度的文章就介绍到这了,更多相关Vue项目打包、合并及压缩内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Vue.js 相关文章推荐
vue+vant实现购物车全选和反选功能
Nov 17 Vue.js
vue自定义插件封装,实现简易的elementUi的Message和MessageBox的示例
Nov 20 Vue.js
vue-router定义元信息meta操作
Dec 07 Vue.js
Vue实现简易购物车页面
Dec 30 Vue.js
vue watch监控对象的简单方法示例
Jan 07 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
Vue中使用wangeditor富文本编辑的问题
Feb 07 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
Vue实现tab导航栏并支持左右滑动功能
Jun 28 Vue.js
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
vue实现移动端div拖动效果
Mar 03 Vue.js
vue递归实现树形组件
Jul 15 Vue.js
idea编译器vue缩进报错问题场景分析
Vue实现导入Excel功能步骤详解
Vue图片裁剪组件实例代码
vue3中provide && inject的使用
Jul 01 #Vue.js
vue中利用mqtt服务端实现即时通讯的步骤记录
Jul 01 #Vue.js
vue+element ui实现锚点定位
Jun 29 #Vue.js
vue实现锚点定位功能
You might like
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
fleaphp常用方法分页之Pager使用方法
2011/04/23 PHP
用Simple Excel导出xls实现方法
2012/12/06 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
老生常谈PHP中的数据结构:DS扩展
2017/07/17 PHP
thinkPHP框架实现的简单计算器示例
2018/12/07 PHP
jquery使用ColorBox弹出图片组浏览层实例演示
2013/03/14 Javascript
网页整体变灰白色(兼容各浏览器)实例
2013/04/21 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
JavaScript中对象介绍
2014/12/31 Javascript
jQuery EasyUI datagrid实现本地分页的方法
2015/02/13 Javascript
javascript实现rgb颜色转换成16进制格式
2015/07/10 Javascript
使用do...while的方法输入一个月中所有的周日(实例代码)
2016/07/22 Javascript
webpack构建vue项目的详细教程(配置篇)
2017/07/17 Javascript
微信小程序实现YDUI的ScrollNav组件
2018/02/02 Javascript
使用vue的transition完成滑动过渡的示例代码
2018/06/25 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
jQuery实现基本隐藏与显示效果的方法详解
2018/09/05 jQuery
JS严格模式原理与用法实例分析
2020/04/27 Javascript
[01:05:56]Liquid vs VP Supermajor决赛 BO 第二场 6.10
2018/07/04 DOTA
python 并发编程 多路复用IO模型详解
2019/08/20 Python
关于Numpy中的行向量和列向量详解
2019/11/30 Python
基于Python的自媒体小助手---登录页面的实现代码
2020/06/29 Python
python 写一个性能测试工具(一)
2020/10/24 Python
Opencv 图片的OCR识别的实战示例
2021/03/02 Python
英国现代市场:ARKET
2019/04/10 全球购物
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
商务专员岗位职责
2013/11/23 职场文书
生日邀请函范文
2014/01/13 职场文书
单位提档介绍信
2014/01/17 职场文书
麦当劳辞职信范文
2014/01/18 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
供应商食品安全承诺书
2015/04/29 职场文书
商业计划书如何写?关键问题有哪些?
2019/07/11 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技
Python批量解压&压缩文件夹的示例代码
2022/04/04 Python