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 相关文章推荐
Mootools 1.2教程(3) 数组使用简介
Sep 14 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
Oct 26 Javascript
Javascript的匿名函数小结
Dec 31 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
jQuery 回车事件enter使用示例
Feb 18 Javascript
基于jQuery实现响应式圆形图片轮播特效
Nov 25 Javascript
学习JavaScript设计模式之享元模式
Jan 18 Javascript
第一篇初识bootstrap
Jun 21 Javascript
Vue.js中关于侦听器(watch)的高级用法示例
May 02 Javascript
微信小程序实现打开并下载服务器上面的pdf文件到手机
Sep 20 Javascript
面试中canvas绘制图片模糊图片问题处理
Mar 13 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
php读取txt文件组成SQL并插入数据库的代码(原创自Zjmainstay)
2012/07/31 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
在Laravel5.6中使用Swoole的协程数据库查询
2018/06/15 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
“不能执行已释放的Script代码”错误的原因及解决办法
2007/09/09 Javascript
JavaScript delete 属性的使用
2009/10/08 Javascript
ExtJS Grid使用SimpleStore、多选框的方法
2009/11/20 Javascript
javascript:void(0)的作用示例介绍
2013/10/28 Javascript
jquery获取当前日期的方法
2015/01/14 Javascript
jQuery+easyui中的combobox实现下拉框特效
2015/02/27 Javascript
浅谈Javascript线程及定时机制
2015/07/02 Javascript
JavaScript实现HTML5游戏断线自动重连的方法
2017/09/18 Javascript
微信小程序使用Promise简化回调
2018/02/06 Javascript
利用Vue-draggable组件实现Vue项目中表格内容的拖拽排序
2019/06/07 Javascript
vue $set 给数据赋值的实例
2019/11/09 Javascript
解决Vue在Tomcat8下部署页面不加载的问题
2019/11/12 Javascript
Vue CLI3移动端适配(px2rem或postcss-plugin-px2rem)
2020/04/27 Javascript
vue Cli 环境删除与重装教程 - 版本文档
2020/09/11 Javascript
JavaScript对象访问器Getter及Setter原理解析
2020/12/08 Javascript
nodejs中使用worker_threads来创建新的线程的方法
2021/01/22 NodeJs
Python笔记(叁)继续学习
2012/10/24 Python
怎么使用pipenv管理你的python项目
2018/03/12 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
Python中正则表达式的用法总结
2019/02/22 Python
利用python list完成最简单的DB连接池方法
2019/08/09 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
7款设计巧妙的css3飘带状3D立体效果的导航菜单和表单窗口
2013/02/04 HTML / CSS
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
Armor Lux法国官方网站:水手服装、成衣和内衣
2020/05/26 全球购物
PHP面试题及答案二
2015/05/23 面试题
STP协议的主要用途是什么?为什么要用STP
2012/12/20 面试题
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
欧元符号 €
2022/02/17 杂记
对象析构函数__del__在Python中何时使用
2022/03/22 Python
Golang日志包的使用
2022/04/20 Golang