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 相关文章推荐
Jquery中Ajax 缓存带来的影响的解决方法
May 19 Javascript
JavaScript加强之自定义event事件
Sep 21 Javascript
AngularJS基础 ng-readonly 指令简单示例
Aug 02 Javascript
js实现时间轴自动排列效果
Mar 09 Javascript
关于Node.js中Buffer的一些你可能不知道的用法
Mar 28 Javascript
基于 webpack2 实现的多入口项目脚手架详解
Jun 26 Javascript
js 显示日期时间的实例(时间过一秒加1)
Oct 25 Javascript
JavaScript运动原理基础知识详解
Apr 02 Javascript
JS+Canvas实现五子棋游戏
Aug 26 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
jquery实现异步文件上传ajaxfileupload.js
Oct 23 jQuery
Vue.js中v-for指令的用法介绍
Mar 13 Vue.js
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
php生成毫秒时间戳的实例讲解
2017/09/22 PHP
PHP实现的简单组词算法示例
2018/04/10 PHP
javascript 兼容鼠标滚轮事件
2009/04/07 Javascript
JavaScript是否可实现多线程  深入理解JavaScript定时机制
2009/12/22 Javascript
js自定义事件代码说明
2011/01/31 Javascript
通过Jscript中@cc_on 语句识别IE浏览器及版本的代码
2011/05/07 Javascript
Javascript面向对象编程
2012/03/18 Javascript
JavaScript执行效率与性能提升方案
2012/12/21 Javascript
javascript中数组的sort()方法的使用介绍
2013/12/18 Javascript
javascript计算当月剩余天数(天数计算器)示例代码
2014/01/09 Javascript
javascript中checkbox使用方法实例演示
2015/11/19 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
js实现拖拽功能
2017/03/01 Javascript
老生常谈jquery中detach()和remove()的区别
2017/03/02 Javascript
weex slider实现滑动底部导航功能
2017/08/28 Javascript
layer.open 子页面弹出层向父页面传输数据的例子
2019/09/26 Javascript
layui table表格数据的新增,修改,删除,查询,双击获取行数据方式
2019/11/14 Javascript
python数据类型_元组、字典常用操作方法(介绍)
2017/05/30 Python
python自动截取需要区域,进行图像识别的方法
2018/05/17 Python
使用Python创建简单的HTTP服务器的方法步骤
2019/04/26 Python
Python PIL读取的图像发生自动旋转的实现方法
2019/07/05 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
Python编程快速上手——Excel表格创建乘法表案例分析
2020/02/28 Python
jupyter 导入csv文件方式
2020/04/21 Python
Python发起请求提示UnicodeEncodeError错误代码解决方法
2020/04/21 Python
Python+pyftpdlib实现局域网文件互传
2020/08/24 Python
Python CategoricalDtype自定义排序实现原理解析
2020/09/11 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
德国隐形眼镜店:LuckyLens
2018/07/29 全球购物
英国医生在线预约:Top Doctors
2019/10/30 全球购物
前厅部经理岗位职责范文
2014/02/04 职场文书
《雷鸣电闪波尔卡》教学反思
2014/02/23 职场文书
领导班子民主生活会整改措施(工商局)
2014/09/21 职场文书
领导干部个人对照检查材料(群众路线)
2014/09/26 职场文书
JavaScript执行机制详细介绍
2021/12/06 Javascript
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android