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 element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
vue实现防抖的实例代码
Jan 11 Vue.js
vue实现轮播图帧率播放
Jan 26 Vue.js
vue+echarts实现中国地图流动效果(步骤详解)
Jan 27 Vue.js
vue如何使用rem适配
Feb 06 Vue.js
深入理解Vue的数据响应式
May 15 Vue.js
vue点击弹窗自动触发点击事件的解决办法(模拟场景)
May 25 Vue.js
vue基于Teleport实现Modal组件
May 31 Vue.js
Vue3.0 手写放大镜效果
Jul 25 Vue.js
vue整合百度地图显示指定地点信息
Apr 06 Vue.js
vue实现登陆页面开发实践
May 30 Vue.js
Vue3实现简易音乐播放器组件
Aug 14 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
利用curl 多线程 模拟 并发的详解
2013/06/14 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
微信小程序 消息推送php服务器验证实例详解
2017/03/30 PHP
浏览器无法运行JAVA脚本的解决方法
2008/01/09 Javascript
可兼容IE的获取及设置cookie的jquery.cookie函数方法
2013/09/02 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JS中如何比较两个Json对象是否相等实例代码
2016/07/13 Javascript
微信小程序录音与播放录音功能
2017/12/25 Javascript
angularjs select 赋值 ng-options配置方法
2018/02/28 Javascript
vue 父组件给子组件传值子组件给父组件传值的实例代码
2019/04/15 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
小程序选项卡以及swiper套用(跨页面)
2020/06/19 Javascript
微信小程序实现多选框功能的实例代码
2020/06/24 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
python概率计算器实例分析
2015/03/25 Python
一些Python中的二维数组的操作方法
2015/05/02 Python
Python入门_浅谈字符串的分片与索引、字符串的方法
2017/05/16 Python
python中实现字符串翻转的方法
2018/07/11 Python
Python实现的爬取小说爬虫功能示例
2019/03/30 Python
python cumsum函数的具体使用
2019/07/29 Python
Python的赋值、深拷贝与浅拷贝的区别详解
2020/02/12 Python
如何将tensorflow训练好的模型移植到Android (MNIST手写数字识别)
2020/04/22 Python
Pandas之缺失数据的实现
2021/01/06 Python
Python基于爬虫实现全网搜索并下载音乐
2021/02/14 Python
HTML5实现的震撼3D焦点图动画的示例代码
2019/09/26 HTML / CSS
博朗(Braun)俄罗斯官方商店:德国小家电品牌
2019/09/24 全球购物
abstract class和interface有什么区别?
2012/01/03 面试题
办公室主任职责范本
2014/03/07 职场文书
教师群众路线剖析材料
2014/09/29 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
工程进度款催款函
2015/06/24 职场文书
文明医院的标语集锦!
2019/07/24 职场文书
golang 如何通过反射创建新对象
2021/04/28 Golang