精选文章 vue【vue-cli3】项目优化

vue【vue-cli3】项目优化

作者:嚣张的胖头鱼 时间: 2020-04-17 12:01:08
嚣张的胖头鱼 2020-04-17 12:01:08

名词解释

spa

全称是单页面应用。 一个SPA就是一个WEB应用,它所需的资源(HTML CSS JS等),在一次请求中就加载完成,也就是不需刷新地动态加载。 用术语“单页”就是因为页面在初始化加载后就永远不会重新加载刷新。 优点 减轻服务器端的压力。 因为服务器先将一份包含了静态资源、JavsScript和模板的静荷数据(payload)发送到了客户端,之后客户端只需要获取渲染页面或视图所需要的数据即可。 payload就是起关键作用的资源 提高了页面的渲染效果。 由于移动设备的流行,可以开发提供JSON格式数据的网络服务,然后可以提供不同的客户端使用。 SPA的使用,我们可以使用一个HTTP API,一个HTTP API相比在服务端渲染一个HTML页面有诸多好处,这样就可以很方便的进行单元测试等操作,还可以被其他很多客户端程序所用。 SPA最大的好处就是大量的工作都在浏览器中完成,服务端承担更少的工作,这样就可以处理更多的请求。同时SPA需要额外的请求模版开销,我们可以通过预编译模版、缓存机制和将多个模板拼接成一个大的模板来减少请求数量。

缺点 首屏加载时间会很长。SEO不友好。 主要是因为SPA利用了hash片段实现路由,而利用hash片段不会作为HTTP请求中的一部分发送给服务器。 而SPA使用hash片段的目的是:**当片段的内容发送变化时,浏览器不会像URI发送变化时那样发起新的网络请求。**这样就可以只请求页面或视图渲染所需要的数据,而不是为每一个页面获取并解析整份文档。

现状

webpack-bundle-analyzer

安装启用webpack-bundle-analyzer 插件 安装 npm i webpack-bundle-analyzer –D
在chainWebpack(链式配置函数里) 增加 if (process.env.NODE_ENV === 'production') { if (process.env.npm_config_report) { config .plugin('webpack-bundle-analyzer') .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin) .end(); } } 然后在package.json 配置 "report": "npm run build --report=true" 执行 npm run report 进行分析,我们可以看到总包大小为 7.56MB

 

vue【vue-cli3】项目优化1

 

以及对应的主要文件分布:

 

 

vue【vue-cli3】项目优化2

 

开发环境每次清缓存后,重新打开浏览器调用测试五次,取平均值。 开发环境系统,初次首屏加载时间为 12.4s。发送137个请求。 其中:chunk-vendors.xxx.js的加载时间最长达到了 8.49s。

 

首屏加载速度优化

1 降低请求数量

将所有的路由设置为异步加载。只是把各个子功能分出去,调用的时候才加载。但是并不会降低总大小。 将同步加载更改为异步加载。路由中这么写: component: () => import('../components/dynamic/secondaryMarket/secondaryMarket.vue'),

2 删除 Prefetch 和 PreLoad规则

先理解 prefetch和preload


复制代码

这段代码告诉浏览器,这段资源将会在未来某个导航或者功能要用到,但是本资源的下载顺序权重比较低。也就是说prefetch通常用于加速下一次导航,而不是本次的。 被标记为prefetch的资源,将会被浏览器在空闲时间加载。


复制代码

preload通常用于本页面要用到的关键资源,包括关键js、字体、css文件。preload将会把资源得下载顺序权重提高,使得关键数据提前下载好,优化页面打开速度。 关闭prefetch

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }
复制代码

进行测试: 开发环境首屏加载的总速度大约在 10.6s。发送102个请求。 其中:chunk-vendors.xxx.js的加载时间最长达到了 7.71s;

3 拆分大文件

Jquery.js 引用过多,暂时没有办法一次清楚 Core.js 不知道自己为什么加载了他,太大了。删掉。 Vue-cookie 采用自己封装的函数替代。 Element-ui 太大了。按需引用。 Element-ui-common.js 文件太大。

import {Dropdown,DropdownMenu,Tree,Popover, Input,Button,Dialog,Loading,Table,TableColumn,Pagination,MessageBox,Message,DatePicker,Popconfirm} from from 'element-ui';
//element-ui需要按需加载
Vue.use(Dropdown);
Vue.use(DropdownMenu);
Vue.use(Tree);
Vue.use(Popover);
Vue.use(Input);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(Table);
Vue.use(Loading);
Vue.use(TableColumn);
Vue.use(Pagination);
Vue.use(DatePicker);
Vue.use(Popconfirm);
复制代码

开发环境首屏加载的总速度大约在 9.9s。发送102个请求。 其中:chunk-vendors.js的加载时间最长达到了 6.91s; 这一步的优化效果不是很理想,原因是element-ui即使拆开配置也会带上 element-ui-common.js,此文件过大。其他的其实占比不是很明显。Jquery的引用又改动代码太多,没办法很快去掉。

4 Gzip

安装并使用 compression-webpack-plugin 组件。 在webpack配置文件中新增,对超过10K的数据进行压缩。

new CompressionPlugin({
   test: /\.js$|\.html$|\.css/, //匹配文件名
   threshold: 10240, //对超过10k的数据进行压缩
   deleteOriginalAssets: false //是否删除原文件
})
复制代码

再执行npm run build

 

vue【vue-cli3】项目优化3

 

 

我们发现打包后的超过10k的文件都生成了对应 .gz文件。此处需要开启ngix的 Gzip配置(目前主流的浏览器都支持)。当浏览器支持 gzip的情况下会读取.gz文件。当不支持的情况会读取原文件。

开发环境首屏加载静态资源的时间大约在 3.2s。发送102个请求。 其中:chunk-vendors.js的加载时间最长达到了 2.63s;效果显著

5 CDN

针对之前第3步优化不理想的情况下,有了第5步的优化。将引用的大组件,主要是 vue element-ui 和 echart,jquery四个大组件。转为请求CDN上的资源。而非打包进咱们的包里。 在index.html 中设置




复制代码

在webpack配置文件里设置configureWebpack设置策略

externals:{
		'echarts':'echarts',
‘vue-router:'vue-router',
‘vue:'vue',
},
复制代码

开发环境首屏加载静态资源的时间大约在 1.89s。发送102个请求。 其中:chunk-vendors.js的加载时间最长达到了 0.49s;效果显著 此处测试采用的是 cdn.bootcss.com 上的资源。还测试一些其他的免费CDN节点的资源。 注意:免费CDN可能会有崩溃的风险。此处可以考虑自建或者商用CDN节点。

构建体积和解析效率

1 动态polyfill

polyfill的含义此处不做解释。vue-cli项目用到的最多的主要是 babel-polyfill。讲es6,7等语法转为 es5以方便一些老的浏览器来支持。动态polyfill指的是根据浏览器,载入需要的polyfill。 Polyfill.io【也可以使用的阿里的polyfill】通过尝试使用polyfill重新创建缺少的功能,可以更轻松地支持不同的浏览器,并且可以大幅度的减少构建体积。

2 现代模式

有了 Babel 我们可以兼顾所有最新的 ES6,7 语言特性,但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES6,ES7 代码会更冗长,运行更慢。现如今绝大多数现代浏览器都已经支持了原生的ES6,7特性。vue-cli 其实提供一种现代模式,本质上是本质上是有条件的加载polyfill,在运行时检测他们的支持。

持续更新


作者:嚣张的胖头鱼
链接:https://juejin.im/post/5e84310b51882573b627e130
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

勿删,copyright占位
分享文章到微博
分享文章到朋友圈

上一篇:5种网络IO模型:阻塞IO、非阻塞IO、异步IO、多路复用IO、信号驱动IO

下一篇:菜鸟教程设计模式之工厂模式

您可能感兴趣

  • uni-app中使用条件编译(7)

    跨端兼容: uni-app 已将常用的组件、JS API 封装进框架中,开发者按照 uni-app 规范开发可以保证多平台兼容,大部分业务均可直接满足。但每一个平台有自己的一些特性,因此会存在一些无法跨平台的情况。 在 C 语言中,通过 #ifdef、#ifndef的方式,为windows、mac 等不同的 os 编译不同的代码。 uni-app 参考这个思路,为 uni-app 提供了条件...

  • 2020年最新web全栈精英课程

    目录: ┣━━阶段01 复习准备:核心技术复习、ES5、ES6、TypeScript、PHP+MySQL开发 ┃ ┣━━01-01 核心技术复习:CSS3矩阵、CSS3实用技巧、ES5核心复习、jQuery源码 ┃ ┣━━01-02 Linux:虚拟机系列安装、常用命令、Cygwin、服务器原理 ┃ ┣━━01-03 复习ES5.1:严格模式、JSON、对象、js作用域和闭包、参数传递 ┃ ...

  • web前端培训课程都需要学习什么内容

    随着web前端技术的不断更新升级,现在的web前端相关是工作要求也逐渐提高,现在对于web前端培训的学员来说,一般学习的前端培训课程更加的复杂,不仅是web前端的内容要会,而且对于后端的知识也要了解。 所以现在的web前端培训课程都是按照全栈工程师的内容进行设计的,具体的学习内容如下: 阶段1.前端核心基础 HTML +_CSS核心、JavaScript基础语法、JavaScript面向对象...

  • Java 集合框架综述,这篇让你吃透!

    一、集合框架图 简化图: 说明:对于以上的框架图有如下几点说明 1、所有集合类都位于java.util包下。Java 的集合类主要由两个接口派生而出:Collection 和 Map,Collection 和 Map 是 Java 集合框架的根接口,这两个接口又包含了一些子接口或实现类。 2、集合接口:6 个接口(短虚线表示),表示不同集合类型,是集合框架的基础。 3、抽象类:5 个抽象类(...

  • 最新Vue底层原理实现概述

    Vue,React这样的框架可以说是现在前端的必备技能,一个刚入门两三个月的前端都是要会Vue的,而且随着Vue3.0发布日程的推进,使用的人群变得多了,开始想去了解它。 Vue这么受大众接受,那么大家有没有想过一个问题?Vue,React这样的框架已经是基本功,我们有什么办法能运用得比别人厉害呢? 能够独立用Vue写一个项目其实只是入了一个门,在如今技术快速发展的背景下,要真的作为一个敢说...

  • 聊一聊前端性能优化

    什么是 CRP? CRP又称关键渲染路径,引用MDN对它的解释: ❝ 关键渲染路径是指浏览器通过把 HTML、CSS 和 JavaScript 转化成屏幕上的像素的步骤顺序。优化关键渲染路径可以提高渲染性能。关键渲染路径包含了 Document Object Model (DOM),CSS Object Model (CSSOM),渲染树和布局。 ❞ 优化关键渲染路径可以提升首屏渲染时间。理...

  • 2020年你必须要会的微前端 -(实战篇)

    戳蓝字"前端优选",关注我们哦! 最近你有没有经常听到一个词,微前端?是不是听上去感觉非常地高大上!然而~ 微前端其实非常地简单,非常地容易落地,而且也非常不高大上~ 那么就来一起看看什么是微前端吧: 一.为什么需要微前端? 这里我们通过3W(what,why,how)的方式来讲解什么是微前端: 1.What?什么是微前端? 微前端就是将不同的功能按照不同的维度拆分成多个子应用。通过主应用来...

  • 好奇!滴滴在 GitHub 开源了哪些有意思的项目?

    公众号关注 “GitHubPorn” 设为 “星标”,每天带你逛 GitHub! 来自 | 滴滴技术 作为卓越的一站式移动出行和生活平台,滴滴在亚洲、拉美和澳洲为超过 5.5 亿用户提供出租车、快车、专车、豪华车、公交、代驾、企业级、共享单车、共享电单车、汽车服务、外卖、支付等多元化的服务。滴滴平台上,有数千万车主及司机获得灵活的工作和收入机会,年运送乘客超过 100 亿人次。 滴滴开源的三...

华为云40多款云服务产品0元试用活动

免费套餐,马上领取!
CSDN

CSDN

中国开发者社区CSDN (Chinese Software Developer Network) 创立于1999年,致力为中国开发者提供知识传播、在线学习、职业发展等全生命周期服务。