vue项目开发优化
1 按需引入ui组件
比如elementUI,不要直接在main.js中全局引入所有的组件,可以根据elementui的说明文件,按需引入
项目中的组件
2 异步引入路由组件
使用
{ path:'/index', name:'index', component:resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk') }
vue自带的异步方式 //路由懒加载,打包之后,注释中webpackChunkName一样的会被打包到同一个js文件中
component: resolve => require(['@/components/index'], resolve)
es提案的import()
component: () => import(/* webpackChunkName: "indexChunk" */ '@/components/index.vue'’
webpack提供的require.ensure()
resolve=>require.ensure([],()=>resolve(require('@/components/index')),,'indexChunk')
路由懒加载时,路由不能动态传值
这段代码将组件分类到名为indexChunk的chunk中,在网站加载时会自动解析需要加载那个chunk,虽然分别打包在总体积会变大(同chunk将打包同一个js文件),但是减少了资源请求,从而提升了速度。
resolve=>require(["@/components/index"],resolve)
3 源码优化
为item设置唯一的key值,减少watch数据,细分vue组件,按需加载图片,图片多的时候可以使用懒加载,SSR服务端渲染;
4 css sourceMap
sourceMap: process.env.NODE_ENV === "production" ? false : true,
externals:{'Vue':'Vue',/*这个名字要与main.js中import的vue同步*/'moment':'moment'},
configureWebpack: (config) => {
Object.assign(config,{
externals:{'Vue':'Vue'}
});
}
其他的第三方插件都可以这样设置,以达到减少打包文件的大小,提升运行速度的效果
<script src="http://cdn.bootcss.com/vue/2.6.10/vue.min.js" type=''text/javascript'></script>
上面的方法,需要手动修改index.html,在开发环境注释掉,在打包的时候才需要引入,可以使用htmlWebpackPlugin
<!-- 通过htmlwebpackplugin动态注入脚本和样式 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.js[i] %>" rel="preload" as="script">
<% } %>
引入css
<!-- 使用CDN的CSS文件 -->
<% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
<link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
<% } %>
在vue.config.js中的配置
chainWebpack: (config) => {
if(process.env.NODE_ENV==='production'){
config.plugin('html')
.tap(args => {
args[0].cdn = cdn;
return args;
})
}
}
const cdn = {
// css: ['xxx.css', 'sss.js'],
js: ['http://cdn.bootcss.com/vue/2.6.10/vue.min.js']
}
vue项目开发优化的更多相关文章
- 关于VUE首屏加载过长的优化,VUE项目开发优化
1. 按需引入UI组件 当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例: (1) 新建一个elementUI.js文件 (2) 访问地址找到按需引入方式的说 ...
- 【Vuejs】335-(超全) Vue 项目性能优化实践指南
点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...
- Vue项目开发相关问题总结
Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...
- Vue项目开发最新、最全代码规范文档
Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337 一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...
- Vue 项目开发
目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...
- 浅谈Vue 项目性能优化 经验
我优化公司的项目总结的几点: 1.先查看引入的图片大小,如果太大了,可以压缩,压缩路径:https://zhitu.isux.us/ 2.代码包优化, 待下项目开发完成.进行打包源码上线环节,需要对项 ...
- vue项目性能优化总结
在使用elementUI构建公司管理系统时,发现首屏加载时间长,加载的网络资源比较多,对系统的体验性会差一点,而且用webpack打包的vuejs的vendor包会比较大.所以通过搜集网上所有对于vu ...
- VUE项目性能优化实践——通过懒加载提升页面响应速度
本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...
- vue项目开发时怎么解决跨域
vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...
随机推荐
- 转 Storm JAVA_HOME is incorrectly set.
问题可能有两个原因: 1.在环境变量中未设置JAVA_HOME变量名称. 解决办法: 在环境变量中添加. 或者在storm中的bin文件下有一个storm-config.cmd,使用文本打开,查询JA ...
- makefile通用模板(二)
DIR_INC = ./include DIR_SRC = ./src DIR_OBJ = ./obj DIR_BIN = ./bin DIR_LIB = /home/exbot/lib LIBS = ...
- php 数组元素加法
<?php//添加一个元素 $dirs[] = '1location';//再次添加一个元素 $dirs[] = '2location';//第三次添加一个元素 $dirs[] = '3loca ...
- Python中_,__,__xx__方法区别
_xx 单下划线开头 Python中没有真正的私有属性或方法,可以在你想声明为私有的方法和属性前加上单下划线,以提示该属性和方法不应在外部调用.如果真的调用了也不会出错,但不符合规范. 方法就是以单下 ...
- 记Oracle中regexp_substr的一次调优(速度提高95.5%)
项目中需要做一个船舶代理费的功能,针对代理的船进行收费,那么该功能的第一步便是选择进行代理费用信息的录入,在进行船舶选择的时候,发现加载相关船舶信息十分的慢,其主要在sql语句的执行,因为测试的时候数 ...
- 2019-暑假作业-Java语言程序设计
本文于2017年创建,最后更新2019-07-16 任务列表 1.学会使用Markdown做笔记 本篇随笔就是使用的Markdown语法.养成做笔记的习惯! 参考资料: 极简MarkDown排版介绍( ...
- mysql innodb与myisam存储文件的区别
myisam: .frm: 存储表定义 .myd(MYData):存储数据 .MYI(MYindex):存储引擎 innodb: .frm:存储表定义 .idb:存储数据和索引,在同一个文件中
- Debian9安装QT5.12.3
打开虚拟机,打开火狐浏览器,输入网址下载QT5.12(linux版本,约13.G) download.qt.io/archive/qt/5.12/5.12.0/ 文件默认下载在Downloads文件夹 ...
- 【转】adb server is out of date. killing完美解决
今天,久未出现的著名的“adb server is out of date. killing”又发生了,在此,将解决方法记下,以便日后查看. 1. 错误信息: C:\Users\lizy>ad ...
- oracle/mysql经典电子书籍pdf下载
Oracle LZ写的书,深入结合oracle设计.优化/SQL优化.应用层架构与优化.大量生产案例,敬请期待... Oracle编程艺术 深入理解数据库体系结构(第3版) 链接:https://pa ...