Vue-Cli项目优化操作的实现


Posted in Javascript onOctober 27, 2019

起源

由Vue-Cli(2.X)生成的Vue项目中存在着首屏加载过慢,编译资源过大等问题,主要针对这些问题对项目进行相应的优化,提升项目响应速度,优化项目性能。

操作

路由懒加载

在Vue-router官方文档中有针对懒加载的介绍,主要是将整个大的js进行切片,对当前路由的资源进行一个按需加载。在Vue-cli生成的路由组件引用方法是这样的

import HelloWorld from '@/components/HelloWorld'

只需将组件的引用方式改为

const HelloWorld = () =>
  import ('@/components/HelloWorld')

然后重新编译即可

开启预加载/优先加载

使用webpack插件 PreloadWebpackPlugin 进行预加载prefetch和优先加载preload。 主要做的是用preload加载vendor、manifest与app三个js而用prefetch去加载所有路由对应的文件。 首先要 安装插件

npm install --save preload-webpack-plugin

在 webpack.prod.conf.js 中修改,加入预加载的代码 (注意放在 new HtmlWebpackPlugin() 的下面)

new PreloadWebpackPlugin({
 rel: 'prefetch',
}),
new PreloadWebpackPlugin({
 rel: 'preload',
 as(entry) {
  if (/\.css$/.test(entry)) return 'style'
  return 'script';
 },
 include: ['app', 'vendor', 'manifest']
})

开启GZip

gzip,使用gzip压缩资源可以更快地加载资源。客户端http请求头声明浏览器支持的压缩方式,服务端配置启用压缩,压缩的文件类型,压缩方式。当客户端请求到服务端的时候,服务器解析请求头,如果客户端支持gzip压缩,响应时对请求的资源进行压缩并返回给客户端,浏览器按照自己的方式解析,在http响应头,我们可以看到 content-encoding:gzip ,这是指服务端使用了gzip的压缩方式。

启用gzip,在nginx的site-conf中开启gzip

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

webpack处理,需要先安装插件

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

然后在config的index.js中 ,将productionGzip改为true,开启Gzip压缩。

PS:如果编译报错,则安装 compression-webpack-plugin@1.1.12 版本

对第三方工具库进行额外处理

本项目中Vender中主要是Vue,Vue-router,axios等固定依赖的代码,工具库的代码一般不会改动,所以可以将这些工具库的代码抽出来,单独走CDN加载以减少编译JS文件的大小。 具体操作 : 选择相应的工具库版本的cdn,加入到index.html中

<script src="//cdn.bootcss.com/vue/2.2.5/vue.min.js"></script>
<script src="//cdn.bootcss.com/vue-router/2.3.0/vue-router.min.js"></script>
<script src="//cdn.bootcss.com/vuex/2.2.1/vuex.min.js"></script>
<script src="//cdn.bootcss.com/axios/0.15.3/axios.min.js"></script>

之后去到webpack中修改相应的打包配置

externals: {
 'vue': 'Vue',
 'vue-router': 'VueRouter',
 'vuex': 'Vuex',
 'axios': 'axios'
}

ps:倘若main.js中有关于公共库的引用 请记得清除掉 这时再去编译 打包 就会发现编译的Vender.js小了很多

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
web 页面分页打印的实现
Jun 22 Javascript
jquery 简单导航实现代码
Sep 11 Javascript
jQuery 打造动态渐变按钮 详细图文教程
Apr 25 Javascript
JS去掉第一个字符和最后一个字符的实现代码
Feb 20 Javascript
JQuery对表单元素的基本操作使用总结
Jul 18 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
jquery中ready()函数执行的时机和window的load事件比较
Jun 22 Javascript
javascript生成随机数方法汇总
Nov 12 Javascript
浅析jQuery Ajax通用js封装
Jun 22 Javascript
node 利用进程通信实现Cluster共享内存
Oct 27 Javascript
mpvue 项目初始化及实现授权登录的实现方法
Jul 20 Javascript
如何构建 vue-ssr 项目的方法步骤
Aug 04 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 #Javascript
Layui 解决表格异步调用后台分页的问题
Oct 26 #Javascript
Layui实现数据表格默认全部显示(不要分页)
Oct 26 #Javascript
vue-router的钩子函数用法实例分析
Oct 26 #Javascript
VUE兄弟组件传值操作实例分析
Oct 26 #Javascript
layui实现给某一列加点击事件
Oct 26 #Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 #Javascript
You might like
德生H-501的评价与改造
2021/03/02 无线电
PHP禁止页面缓存的代码
2011/10/23 PHP
php堆排序(heapsort)练习
2013/11/13 PHP
让codeigniter与swfupload整合的最佳解决方案
2014/06/12 PHP
php中动态修改ini配置
2014/10/14 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
深入讲解PHP Session及如何保持其不过期的方法
2015/08/18 PHP
tagName的使用,留一笔
2006/06/26 Javascript
Javascript 面向对象 重载
2010/05/13 Javascript
jQuery的Ajax的自动完成功能控件简要说明
2013/02/22 Javascript
一个支持任意尺寸的图片上下左右滑动效果
2014/08/24 Javascript
由浅入深剖析Angular表单验证
2016/07/14 Javascript
JS结合bootstrap实现基本的增删改查功能
2016/07/22 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
Phaser.js实现简单的跑酷游戏附源码下载
2018/10/26 Javascript
bootstrap tooltips在 angularJS中的使用方法
2019/04/10 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
python基础教程之对象和类的实际运用
2014/08/29 Python
Python探索之SocketServer详解
2017/10/28 Python
Pyinstaller将py打包成exe的实例
2018/03/31 Python
Python多重继承的方法解析执行顺序实例分析
2018/05/26 Python
python学生管理系统学习笔记
2019/03/19 Python
Python3如何对urllib和urllib2进行重构
2019/11/25 Python
在 Python 中接管键盘中断信号的实现方法
2020/02/04 Python
Python批量安装卸载1000个apk的方法
2020/04/10 Python
python实现贪吃蛇双人大战
2020/04/18 Python
Django设置Postgresql的操作
2020/05/14 Python
利用python 下载bilibili视频
2020/11/13 Python
澳大利亚领先的男装零售连锁店:Lowes
2020/08/07 全球购物
工伤赔偿协议书范本
2014/04/15 职场文书
信息技术课后反思
2014/04/27 职场文书
党的群众路线教育实践活动个人整改措施范文
2014/11/04 职场文书
CSS3点击按钮圆形进度打钩效果的实现代码
2021/03/30 HTML / CSS
python 爬取豆瓣网页的示例
2021/04/13 Python
sass 常用备忘案例详解
2021/09/15 HTML / CSS