【原创】Webpack构建中hash的优化
背景:
- SPA的vue应用,采用webpack2构建,打包入口为main.js
- 输出:main模块打包成app.js,公共lib打包成vendor.js,公共样式打包成app.css,运行时依赖打包成mainfest.js,路由页面动态加载,输出以ID开头的js文件
- 缓存策略:对所有输出的文件加载hash值,服务器加上永久缓存的标志,通过hash来判断是否有新文件
改造前hash值改变的场景:
1、修改某个页面的业务代码:只有对应页面js的hash值改变 √
2、修改公共样式:只有app.css文件的hash值改变 √
3、增加页面(即在路由中动态导入模块):所有模块的hash值都改变,包括app、vendor、mainfest和所有页面的js模块文件 ×(不能忍,会导致浏览器重新下载所有模块)
3、引入新库(即在Main中静态导入模块):所有模块的hash值都改变,包括app、vendor、mainfest和所有页面的js模块文件 ×(同上)
原因分析:
1、默认情况下webpack的模块都是以一个有序数列命名的,也就是[0,1,2....]。
2、当引入/删除模块时,原有的顺序被打乱,导致所有模块的hash值改变,进而导致chunkhash改变。
3、所以app因为内容变化而变化,页面因为module.id变化而变化,vendor因为打包进的各个模块module.id发生变化,runtime因为它维护依赖关系而变化。
优化步骤:
1、稳定moduleId,
2、稳定chunkhash,(var WebpackChunkHash = require('webpack-chunk-hash');)
3、去除命名中的chunkId
优化后测试:
1、修改某个页面的业务代码:只有对应页面js的hash值改变 √
2、修改公共样式:只有app.css文件的hash值改变 √
3、增加页面(即在路由中动态导入模块):仅改变代码的app发生变化 √
4、引入新库(即在Main中静态导入模块):仅改变代码的app和打包新库的vendor发生变化` √
优化后的速度和压缩率 比对:
构建总时间(第一次) | 构建总时间(3次平均) | 构建总大小(第一次) | 构建总大小(3次平均) | |
初始 | 64849ms | 64882ms | 2.50MB | 2.50MB |
优化后 | 63867ms | 62276ms | 2.50MB | 2.50MB |
改动后构建速度和大小没有明显变化,构建时间稍微减少1~2秒。稳定hash不会对性能有影响。
【原创】Webpack构建中hash的优化的更多相关文章
- webpack构建缓存机制-hash介绍
前言 浏览器为了优化体验,会有缓存机制.如果浏览器判断当前资源没有更新,就不会去服务端下载,而是直接使用本地资源.在webpack的构建中,我们通常使用给文件添加后缀值来改名以及提取公共代码到不会改变 ...
- 【前端构建】WebPack实例与前端性能优化
计划把微信的文章也搬一份上来. 这篇主要介绍一下我在玩Webpack过程中的心得.通过实例介绍WebPack的安装,插件使用及加载策略.感受构建工具给前端优化工作带来的便利. 壹 | Fisrt 曾几 ...
- 优化Webpack构建性能的几点建议
Webpack 作为目前最流行的前端构建工具之一,在 vue/react 等 Framework 的生态圈中都占据重要地位.在开发现代 Web 应用的过程中,Webpack 和我们的开发过程和发布过程 ...
- 【原创】构建高性能ASP.NET站点 第六章—性能瓶颈诊断与初步调优(下前篇)—简单的优化措施
原文:[原创]构建高性能ASP.NET站点 第六章-性能瓶颈诊断与初步调优(下前篇)-简单的优化措施 构建高性能ASP.NET站点 第六章—性能瓶颈诊断与初步调优(下前篇)—简单的优化措施 前言:本篇 ...
- 【原创】构建高性能ASP.NET站点之二 优化HTTP请求(前端)
原文:[原创]构建高性能ASP.NET站点之二 优化HTTP请求(前端) 构建高性能ASP.NET站点之二 优化HTTP请求(前端) 前言: 这段时间比较的忙,文章写不是很勤,希望大家谅解. 上一篇文 ...
- 【原创】构建高性能ASP.NET站点 第七章 如何解决内存的问题(前中篇)—托管资源优化—监测CLR性能
原文:[原创]构建高性能ASP.NET站点 第七章 如何解决内存的问题(前中篇)-托管资源优化-监测CLR性能 构建高性能ASP.NET站点 第七章 如何解决内存的问题(前中篇)—托管资源优化—监测C ...
- webpack中 hash chunkhash
hash一般是结合CDN缓存来使用,通过webpack构建之后,生成对应文件名自动带上对应的MD5值.如果文件内容发生改变的话,那么对应文件hash值也会改变,对应的HTML引用的URL地址也会改变, ...
- 深入浅出的webpack构建工具---HappyPack优化构建(九)
阅读目录 一:什么是HappyPack? 作用是什么? 二:如何在配置中使用HappyPack? 回到顶部 一:什么是HappyPack? 作用是什么? Webpack是允许在NodeJS中的,它是单 ...
- 在visual code的debugger for chrome中调试webpack构建的项目
一直使用chrome中内置的调试器, 感觉世界那么美好, 自从学了react之后,使用visual code作为编辑器, 它提供了很多插件, 其中就包括debugger for chrome, 一款使 ...
随机推荐
- Vue-生命周期图示 注解
根据腾讯课堂视频讲解,将官网生命周期图示进行注解,以加深印象和理解 贴一个源码示例: 注意位置和写法
- mininet中加载ECN
今天捣鼓了一上午,中午把ECN部署到mininet中了,简单记录下加载过程: 加载前搜索了全网,找到了一个有用的参考网页:https://groups.google.com/a/openflowhub ...
- python迭代和切片
from collections import Iterable #切片************************ # #取一个list或tuple的部分元素是非常常见的操作 ,Python提供 ...
- java接口----继承(实现)方法
文中"实现"一词特指接口的继承. 一个类实现多个接口时,不能出现同名的默认方法. 一个类既要实现接口又要继承抽象类,先继承后实现. 一个抽象类可以继承多个接口(implements ...
- LeetCode之Easy篇 ——(7)Reverse Integer
7.Reverse Integer Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: Out ...
- css学习の第二弹—文字格式化排版
1.css格式化排版 >>字体设计: etc:body{font-family:"Microsoft Yahei";} >>字号,颜色: etc:body{ ...
- WPF自学入门(八)WPF窗体之间的交互
今天我们一起来看一下WPF窗体之间的交互-窗体之间的传值.有两个窗体,一个是父窗体,一个是子窗体.要将父窗体的文本框中的值传递给子窗体中的控件.我们该怎么实现? 接下来我们一起来实现窗体之间的传值,在 ...
- jemeter 实现接口自动化回归测试
jemeter做接口自动化测试的优点: 1.首先我认为最重要的是不需要编程基础,很多一直想做接口测试但一直徘徊在门边的原因可能就是不想写代码 2.可以更快的上手,能让测试人员更好的理解什么是接口测试, ...
- 微信小程序之swiper组件高度自适应
微信小程序之swiper组件高度自适应 要求: (顶部广告栏 ) 改变swiper组件的固定高度,使之随内部每张图片的高度做自适应 原理: 图片加载完之后,获取图片的原始宽高,根据宽高比,计算出适应后 ...
- php类中双冒号和->的区别
就是为了区分对象的方法和属性,和是访问类的静态方法和静态变量,类的静态方法和静态变量是类公用的,不需要实例化也能访问,而对象的方法和属性是每个对象特有的,因此必须先实例化.其他语言如C++,JAVA等 ...