VUE 前端项目优化方法

前端项目通过webpack打包会生成app.js和vendor.js,如果第三方组件依赖过多,会造成打包后的vendor.js过大,页面首次加载的时候会出现白屏时间过长,影响用户体验。对此,我们需要通过下面的方法对前端项目进行优化,减小打包后生成的js大小,从而提高加载速度。下面以USM项目为例,进行优化:

一、公用静态资源通过CDN加载

目前所有项目都通过npm包的形式引入vue、vue-router、axios、vuex、element-ui、ucar-view这些第三方包,webpack打包的时候会将这些资源打包到vendor.js中,我们可以将这些公用资源通过cdn引入到index.html中,可大大减小vendor.js的大小。

第一步:index.html中cdn引入静态资源

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <meta name="renderer" content="webkit" />
    <link rel="shortcut icon" href="static/logo.ico" />
    <title>统一管理系统-神州优车集团协同办公门户</title>
    <!-- heade中引入公用css资源 -->
    <link rel="stylesheet" href="http://w3static.zuchecdn.com/upload/201901/1547542189993_element-ui.css" />
    <link rel="stylesheet" href="http://w3static.zuchecdn.com/upload/201901/1547548288099_ucar-view.css" />
  </head>
  <body>
    <div id="app"></div>
    <!-- body中引入公用js资源 -->
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542004668_vue.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542053516_axios.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542073388_vue-router.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542116839_element-ui.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547695026296_ucar-view.umd.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542098031_vuex.min.js"></script>
    <script src="http://w3static.zuchecdn.com/upload/201901/1547542135730_es6-promise.auto.min.js"></script>
  </body>
</html>

第二步:webpack.base.conf.js中引入静态资源

//放入module.exports中
externals: {
    vue: ‘Vue‘,
    ‘vue-router‘: ‘VueRouter‘,
    axios: ‘axios‘,
    vuex: ‘Vuex‘,
    ‘element-ui‘: ‘ELEMENT‘,
    ‘@ucar/ucar-view‘: ‘ucar-view‘
  },

第三步:main.js中删除element-ui、ucar-view的引用

  删除import elementui from ‘element-ui‘

  删除import ucarView from ‘@ucar/ucar-view‘

  删除Vue.use(elementui)

  删除Vue.use(ucarView) 或者 Vue.use(Element, { size: ‘small‘})

  删除import ‘element-ui/lib/theme-chalk/index.css‘

  增加Vue.prototype.$ELEMENT = { size: ‘small‘}

第四步:删除项目依赖包

在项目package.json中删除已经用cdn引入的包

删除前:

删除后:

这四步完成后,需从新启动项目才能正常运行,npm run build打包后能明显发现vendoe.js缩小很多

二、开启gzip压缩

config/index.js文件的productionGzip设置为true

然后安装compression-webpack-plugin依赖

npm install --save-dev [email protected]

注意:不能安装最新的2.0版本,需webpack4.x版本支持,安装时固定版本号即可

npm run build 打包后,app.js和vendor.js会生成gzip压缩文件,app.js也从237k压缩到42k

想让浏览器加载页面时加载gzip格式的压缩文件,还需要在nginx服务器配置开启gzip

原文地址:https://www.cnblogs.com/liuqing576598117/p/10303708.html

时间: 2024-11-06 07:48:38

VUE 前端项目优化方法的相关文章

vue前端项目开发环境搭建并用npm方式运行

1.下载node.js http://nodejs.cn/download/ 推荐下载 .mis安装包,下一步下一步... 安装完后,通过cmd控制台输入node -v 弹出版本号即成功 2.通过node.js中内置的npm(包/依赖)插件来下载其他开发所需的环境 注意:如设置了代理限制,可通过cmd控制台输入npm config set proxy=http://代理服务器地址:8080 设置代理(网络有代理限制时下载不到依赖包时,按需设置) npm config delete proxy 为

性能测试(六)前端性能优化方法

日常工作和生活中,我们经常利用浏览器去打开一些URL来获取我们所需的资源,那么作为一个开发者或者性能测试工程师,如何去测试并提升优化前端的性能呢? 一.浏览器打开URL和方式和过程 不同浏览器工作方式不完全一样,大体来讲,浏览器的核心是浏览器引擎:不同浏览器对W3C的规范支持不尽相同,在具体功能的实现上也不完全一致. 1.连接到URL所在的服务器 用户在浏览器地址栏输入URL,打开URL时,浏览器首先寻找该URL所在的服务器.通过向DNS服务器查询,获取该URL所在网站的IP地址,然后浏览器向该

【vue】创建一个vue前端项目,编译,发布

[一]mac检查是否安装node.js nvm --version =>0.33.9 node -v =>v10.7.0 [二]安装vue-cli cnpm install --global vue-cli [三]创建一个vue项目.基于 # 创建一个基于 webpack 模板的新项目 $ vue init webpack my-project # 这里需要进行一些配置,默认回车即可 原文地址:https://www.cnblogs.com/shangxiaofei/p/9429512.htm

vue cli3 项目优化

vue-cli3 Prefetch (官网内容) <link rel="prefetch"> 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容. 默认情况下,一个 Vue CLI 应用会为所有作为 async chunk 生成的 JavaScript 文件 (通过动态 import()按需 code splitting 的产物) 自动生成 prefetch 提示. 这些提示会被 @vue/preload-web

搭建vue前端项目

1. 确认安装nodejs 2. 确认安装npm 3. 国内npm下载依赖的速度太慢,淘宝镜像cnpm速度快,所以注册cnpm代替npm. npm install cnpm -g --registry=https://registry.npm.taobao.org 4. 安装vue-cli cnpm install -g vue-cli 5. 初始化项目,打包工具选择webpack,项目名称:vue-test-ui vue init webpack vue-test-ui 6. 接下来,填写一些

前端性能优化方法

1.压缩图片 2.减少冗余代码 3.避免404错误 4.避免滤镜的使用 5.在HTML中不要使用压缩图片 6.DNS解析优化,DNS缓存,减少DNS查找. 7.异步加载(并发.require) 8.预加载.延迟加载,按需加载 9.减少重绘和回流 10.减少DOM节点 11.减少节点的操作(innerHTML) 12.缓存节点,尽量减少节点的查找 13.避免无谓的循环:break,continue,return的适当使用 14.减少HTTP请求:比如用 css sprites 合并图片或用 css

前端性能优化-减少http请求,dns预解析,减少repaint和reflow

前端性能优化方法: 一 . 减少http请求 (1)通过合并图片,减少请求,俗称css sprites(css精灵)css sprites (2)lazyload懒加载,在需要的时候再加载 1.定义:懒加载也称为延迟加载,图片需要用到的时候再去价值 2.用法:就是重写对象的get方法,当系统调用get方法再去加载对象 3.优点:(1)对象的实例化在getter方法中,各司其职,降低耦合性:(2)真正需要资源时,再去加载,系统的内存占用率会减小 (3)压缩/合并css和js 二 .减少repain

WEB前端性能优化常见方法

web前端是应用服务器处理之前的部分,前端主要包括:HTML,CSS,javascript,image等各种资源,针对不同的资源有不同的优化方式. 1. 内容优化 (1)减少HTTP请求数:这条策略是最重要最有效的,因为一个完整的请求要经过DNS寻址,与服务器建立连接,发送数据,等待服务器响应,接收数据这样一个消耗时间成本和资源成本的复杂的过程. 常见方法:合并多个CSS文件和js文件,利用CSS Sprites整合图像,Inline Images(使用 data:URL scheme在实际的页

vue项目优化之按需加载组件-使用webpack require.ensure

vue项目优化之按需加载组件-使用webpack require.ensure 使用 vue-cli构建的项目,在 默认情况下 ,执行 npm run build  会将所有的js代码打包为一个整体, 打包位置是 dist/static/js/app.[contenthash].js 类似下面的路由代码 router/index.js  路由相关信息,该路由文件引入了多个 .vue组件 import Hello from '@/components/Hello' import Province