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 ...
随机推荐
- MySQL-linux系统下面的配置文件
一般linux 上都放在 /etc/my.cnf ,window 上安装都是默认可能按照上面的路径还是没找到, window 上 可以登录到mysql中 使用 show variables ...
- MySQL 数据库,主键为何不宜太长长长长长长长长?
回答星球水友提问:沈老师,我听网上说,MySQL数据表,在数据量比较大的情况下,主键不宜过长,是不是这样呢?这又是为什么呢? 这个问题嘛,不能一概而论: (1)如果是InnoDB存储引擎,主键不宜过长 ...
- codevs:1792分解质因数:编写一个把整数N分解为质因数乘积的程序。
#include<iostream>#include<cstdio>using namespace std;int main(){ int i=2,n; scanf(" ...
- Python3文件
open()方法 Python open()方法永于打开一个文件,并返回文件对象,并对文件进行处理过程中都需要用到这个方法,如果该文件无法被打开,则抛出OSError 注意:使用open()方法一定要 ...
- 第12组 Alpha冲刺(3/6)
Header 队名:To Be Done 组长博客 作业博客 团队项目进行情况 燃尽图(组内共享) 展示Git当日代码/文档签入记录(组内共享) 注: 由于GitHub的免费范围内对多人开发存在较多限 ...
- Note_4.9
2019/4/9 奇奇怪怪的笔记 关于代码,基本上是现写的,可能连编译都过不了 因为是简单算法场,所以就很不走心了昂,/小纠结 图论相关 最小生成树 prim,kruskal 最小生成树的切割性质 ...
- SpringMVC从Session域中获取值
SpringMVC从Session域中获取值 SpringMVC环境自行搭建 第一步:前端页面 第二步.后台代码 第三步.响应视图 第四步.在当前处理器所在的类设置@SessionAttributes ...
- ICEM-气化炉
原视频下载地址:https://yunpan.cn/cuPJWRHUJKXIL 访问密码 d379
- DELPHI开发LINUX插件架构的程序
DELPHI开发LINUX插件架构的程序 DELPHI可以开发LINUX配置型插件架构的程序,并且这一套插件架构,同样适用于MSWINDOWS和MAC. 配置插件: 根据配置,动态加载插件:
- 【转】反编译获取任何微信小程序源码(完)
一.前言最近在学习微信小程序开发,半个月学习下来,很想实战一下踩踩坑,于是就仿写了一个阿里妈妈淘宝客小程序的前端实现,过程一言难尽,差不多两周时间过去了,发现小程序的坑远比想象的要多的多!!在实际练手 ...