专栏首页向前进【原创】Webpack构建的hash优化,vue-cli项目为例

【原创】Webpack构建的hash优化,vue-cli项目为例

背景:

  • 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模块文件 ×(不能忍,会导致浏览器重新下载所有模块)

PS:没测试过之前,我一直以为不会改变所有的hash值。。。。

3、引入新库(即在Main中静态导入模块):所有模块的hash值都改变,包括app、vendor、mainfest和所有页面的js模块文件 ×(同上)

原因分析:

1、默认情况下webpack的模块都是以一个有序数列命名的,也就是[0,1,2....]。 2、当引入/删除模块时,原有的顺序被打乱,导致所有模块的hash值变动,进而导致chunkhash改变。

上述场景【4】为例:

  • app.js因为内容变化(引入新模块)而变化
  • 页面模块因为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不会对性能有影响。

注:最新的webpack4中api已发生变化,并且不会有此问题。建议在webpack4经生产大规模运用后切换到webpack4

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 【笔记】快应用QuickApp(hap) -- 构建一个微博应用

    一、背景   在上次和小伙伴分享了快应用(后面简称hap)后,有很多待定的思路没有去尝试。这周有时间简单开发了一个热门微博的应用,主要涉及到的难点:富文本、长列...

    SmileSmith
  • 【原创】最新的"答题热"中,前端的一点小工作

    一、前言   据王思聪引爆全民HQ也3个星期了,总结下最新做的一个有关"答题热"的工具。并借由这个工具的开发,分析当下HybridApp中H5的一些技术。   ...

    SmileSmith
  • 备份的一些小tip

    // npm官方镜像 npm config set registry=http://registry.npmjs.org // 亚马逊S3 host 219....

    SmileSmith
  • 微信中通过页面(H5)直接打开本地app的解决方案

    简述 微信中通过页面直接打开app分为安卓版和IOS版,两个的实现方式是完全不同的。 安卓版实现:使用腾讯的应用宝,只要配置了“微下载”之后,打开链接腾讯会帮你...

    Java中文社群_老王
  • 再看Android官方文档之Fragment&数据保存

    子勰
  • 如果有机会重来,你还愿意做iOS开发嘛~

    作为从事 iOS 开发好几年的“编程狗”,我见识过 2013-2014 年移动端大热时的疯狂,见识过 2016 年一个 iOS 岗位对应千封简历的疯狂(培训班扰...

    iOSSir
  • Appium自动化(11) - 详解 Applications 类里的方法和源码解析

    https://www.cnblogs.com/poloyy/category/1693896.html

    小菠萝测试笔记
  • InnoDB bugs found during research on InnoDB data storage(10.在研究InnoDB数据存储时发现的InnoDB bug)

    在研究InnoDB的存储格式和构建innodb_ruby和innodb_diagrams项目的过程中,我和Davi Arnaut发现了很多InnoDB的bug。...

    冬天里的懒猫
  • 27. Flask 蓝图 Blueprint

    我们在使用Flask框架,是从写单个文件,执行hello world开始的。我们在这单个文件中可以定义路由、视图函数、定义模型等等。但这显然存在一个问题:随着业...

    Devops海洋的渔夫
  • 基于flask的网页聊天室(一)

    login.html与register.html可以基于bootstarp来简单的创建,效果是这样的,很丑:

    py3study

扫码关注云+社区

领取腾讯云代金券