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,
// 是否构建样式地图,false 将提高构建速度
 
 
5 如果上面的操作之后,还是慢可以这样设置,在项目打包的时候不打包第三方库,直接使用cdn进行引入,可以大大减少打包文件的体积
需要这样的在设置:demo:vue为例
externals:{'Vue':'Vue',/*这个名字要与main.js中import的vue同步*/'moment':'moment'},
使用vue-cli3需要这样设置:
configureWebpack: (config) => {
Object.assign(config,{
externals:{'Vue':'Vue'}
});
}

其他的第三方插件都可以这样设置,以达到减少打包文件的大小,提升运行速度的效果

 在index.html中手动引入cdn上的vue.js
<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项目开发优化的更多相关文章

  1. 关于VUE首屏加载过长的优化,VUE项目开发优化

    1. 按需引入UI组件 当下市面上流行的UI组件基本都支持按需加载,本文以Element UI为例: (1)     新建一个elementUI.js文件 (2)     访问地址找到按需引入方式的说 ...

  2. 【Vuejs】335-(超全) Vue 项目性能优化实践指南

    点击上方"前端自习课"关注,学习起来~ 前言 Vue 框架通过数据双向绑定和虚拟 DOM 技术,帮我们处理了前端开发中最脏最累的 DOM 操作部分, 我们不再需要去考虑如何操作 D ...

  3. Vue项目开发相关问题总结

    Vue项目开发相关问题总结 一.创建一个项目(两种方式) 1.通过CLI命令行创建,具体步骤如下: (1)Node 版本要求 Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11 ...

  4. Vue项目开发最新、最全代码规范文档

    Vue项目开发最新.最全代码规范文档 2019年02月21日 10:43:49 yw00yw 阅读数 337   一. 目录结构 |— build 构建脚本目录 |— build.js 生产环境构建( ...

  5. Vue 项目开发

    目录 Vue 项目开发 项目目录结构解析 入口文件 main.js (项目入口) 根组件 app.vue index.html 文件入口 router 路由 components 子组件 项目初始化 ...

  6. 浅谈Vue 项目性能优化 经验

    我优化公司的项目总结的几点: 1.先查看引入的图片大小,如果太大了,可以压缩,压缩路径:https://zhitu.isux.us/ 2.代码包优化, 待下项目开发完成.进行打包源码上线环节,需要对项 ...

  7. vue项目性能优化总结

    在使用elementUI构建公司管理系统时,发现首屏加载时间长,加载的网络资源比较多,对系统的体验性会差一点,而且用webpack打包的vuejs的vendor包会比较大.所以通过搜集网上所有对于vu ...

  8. VUE项目性能优化实践——通过懒加载提升页面响应速度

    本文由葡萄城技术团队原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 最近我司因业务需求,需要在一个内部数据分析平台集成在线Excel功能,既然我 ...

  9. vue项目开发时怎么解决跨域

    vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow-Origin' header is prese ...

随机推荐

  1. 转 Storm JAVA_HOME is incorrectly set.

    问题可能有两个原因: 1.在环境变量中未设置JAVA_HOME变量名称. 解决办法: 在环境变量中添加. 或者在storm中的bin文件下有一个storm-config.cmd,使用文本打开,查询JA ...

  2. makefile通用模板(二)

    DIR_INC = ./include DIR_SRC = ./src DIR_OBJ = ./obj DIR_BIN = ./bin DIR_LIB = /home/exbot/lib LIBS = ...

  3. php 数组元素加法

    <?php//添加一个元素 $dirs[] = '1location';//再次添加一个元素 $dirs[] = '2location';//第三次添加一个元素 $dirs[] = '3loca ...

  4. Python中_,__,__xx__方法区别

    _xx 单下划线开头 Python中没有真正的私有属性或方法,可以在你想声明为私有的方法和属性前加上单下划线,以提示该属性和方法不应在外部调用.如果真的调用了也不会出错,但不符合规范. 方法就是以单下 ...

  5. 记Oracle中regexp_substr的一次调优(速度提高95.5%)

    项目中需要做一个船舶代理费的功能,针对代理的船进行收费,那么该功能的第一步便是选择进行代理费用信息的录入,在进行船舶选择的时候,发现加载相关船舶信息十分的慢,其主要在sql语句的执行,因为测试的时候数 ...

  6. 2019-暑假作业-Java语言程序设计

    本文于2017年创建,最后更新2019-07-16 任务列表 1.学会使用Markdown做笔记 本篇随笔就是使用的Markdown语法.养成做笔记的习惯! 参考资料: 极简MarkDown排版介绍( ...

  7. mysql innodb与myisam存储文件的区别

    myisam: .frm: 存储表定义 .myd(MYData):存储数据 .MYI(MYindex):存储引擎 innodb: .frm:存储表定义 .idb:存储数据和索引,在同一个文件中

  8. Debian9安装QT5.12.3

    打开虚拟机,打开火狐浏览器,输入网址下载QT5.12(linux版本,约13.G) download.qt.io/archive/qt/5.12/5.12.0/ 文件默认下载在Downloads文件夹 ...

  9. 【转】adb server is out of date. killing完美解决

    今天,久未出现的著名的“adb server is out of date.  killing”又发生了,在此,将解决方法记下,以便日后查看. 1. 错误信息: C:\Users\lizy>ad ...

  10. oracle/mysql经典电子书籍pdf下载

    Oracle LZ写的书,深入结合oracle设计.优化/SQL优化.应用层架构与优化.大量生产案例,敬请期待... Oracle编程艺术 深入理解数据库体系结构(第3版) 链接:https://pa ...