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 相关文章推荐
passwordStrength 基于jquery的密码强度检测代码使用介绍
Oct 08 Javascript
jquery写个checkbox——类似邮箱全选功能
Mar 19 Javascript
jquery实现树形二级菜单实例代码
Nov 20 Javascript
jQuery获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
JS判断是否手机或pad访问实现方法
Dec 09 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
Feb 27 Javascript
layui实现数据分页功能(ajax异步)
Jul 27 Javascript
node.js通过url读取文件
Oct 16 Javascript
vue代码分块和懒加载非必要资源文件
Apr 11 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运算符的知识大全
2011/11/03 PHP
php中文验证码实现示例分享
2014/01/12 PHP
PHP中auto_prepend_file与auto_append_file用法实例分析
2014/09/22 PHP
PHP中调用SVN命令更新网站方法
2015/01/07 PHP
php银联网页支付实现方法
2015/03/04 PHP
Yii扩展组件编写方法实例分析
2015/06/29 PHP
laravel 执行迁移回滚示例
2019/10/23 PHP
零基础学JavaScript最新动画教程+iso光盘下载
2008/01/22 Javascript
读jQuery之六 缓存数据功能介绍
2011/06/21 Javascript
根据配置文件加载js依赖模块
2014/12/29 Javascript
js和jquery分别验证单选框、复选框、下拉框
2015/12/17 Javascript
BootStrap组件之进度条的基本用法
2017/01/19 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
浅析从vue源码看观察者模式
2018/01/29 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
2019/09/03 jQuery
ES6学习笔记之字符串、数组、对象、函数新增知识点实例分析
2020/01/22 Javascript
JavaScript实现音乐导航效果
2020/11/19 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
python实现搜索指定目录下文件及文件内搜索指定关键词的方法
2015/06/28 Python
pyqt5利用pyqtDesigner实现登录界面
2019/03/28 Python
Python3+Appium安装使用教程
2019/07/05 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
Python3 hashlib密码散列算法原理详解
2020/03/30 Python
浅谈matplotlib中FigureCanvasXAgg的用法
2020/06/16 Python
Pytest单元测试框架如何实现参数化
2020/09/05 Python
DKNY品牌官网:纽约大都会时尚风格
2016/10/20 全球购物
Chain Reaction Cycles芬兰:世界上最大的在线自行车商店
2017/12/06 全球购物
婚前协议书怎么写
2014/04/15 职场文书
交警个人先进事迹材料
2014/05/11 职场文书
2014年政务公开工作总结
2014/12/09 职场文书
公司出纳岗位职责
2015/03/31 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
导游词之镇江西津古渡
2019/11/06 职场文书
使用Springboot实现健身房管理系统
2021/07/01 Java/Android
Redis如何使用乐观锁(CAS)保证数据一致性
2022/03/25 Redis