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. C++命令空间使用和编译

    先创建目录结构 src bin obj lib include 1.创建命名空间 创建一个头文件include/head.h; #ifndef _GOOD_H #define _GOOD_H name ...

  2. while循环实现十进制转二进制

    #include <stdio.h> int main(void){ int a,n; printf("pls input number:\n"); scanf(&qu ...

  3. 【dp】p1025数的划分

    题目描述] 将整数n分成k份,且每份不能为空,任意两份不能相同(不考虑顺序). 例如:n=7,k=3,下面三种分法被认为是相同的. 1,1,5: 1,5,1: 5,1,1: 问有多少种不同的分法. 输 ...

  4. 数据结构实验之排序五:归并求逆序数(SDUT 3402)

    归并排序详解(戳我). 以下是搬了别人的. #include<stdio.h> #include<stdlib.h> long long sum = 0; int a[1000 ...

  5. Oracle,regexp_replace函数,replace函数

    replace函数(不知支持正则表达式)语法: replace(原字段,“原字段旧内容“,“原字段新内容“,) select replace(原字段,'原字段旧内容','原字段新内容') from T ...

  6. 2018-2019 20165226 Exp 8 Web基础

    2018-2019 20165226 Exp 8 Web基础 目录 一.实验内容说明及基础问题回答 二.实验过程 1.Web前端:HTML 2.Web前端j:avascipt 3.Web后端:MySQ ...

  7. 2019SDN课程阅读作业(2)

    1.过去20年中可编程网络的发展可以分为几个阶段?每个阶段的贡献是什么? 分为三个阶段,第一个阶段是主动网络(从20世纪90年代中期到21世纪初),它在网络中引入了可编程功能,以实现更大的创新:第二个 ...

  8. vue+elementui搭建后台管理界面(5递归生成侧栏路由)

    有一个菜单树,顶层菜单下面有多个子菜单,子菜单下还有子菜单... 这时候就要用递归处理 1 定义多级菜单 修改 src/router/index.js 的 / 路由 { path: '/', redi ...

  9. rg.hibernate.NonUniqueObjectException: a different object with the same identifier value was already associated with the session:

    原先跑TEST CASE的时候没有出错 但是跑到整个程序里面,除了这个问题, 网上也找了下资料,说是用merge之类的可以解决,因为你这个update的obj和session里面的不用,所以导致此问题 ...

  10. Java 8 新特性总结

    一.Java 8 Lambda表达式 Lambda表达式,也称为闭包,它是推动Java 8发布的最重要新特性. Lambda允许把函数作为一个方法的参数(函数作为参数传递进方法). 1.1 语法 使用 ...