专栏首页IMWeb前端团队webpack构建优化之减少发布文件

webpack构建优化之减少发布文件

本文作者:IMWeb jaychen 原文出处:IMWeb社区 未经同意,禁止转载

本文作者:IMWeb json 原文出处:IMWeb社区 未经同意,禁止转载

概述

随着项目越来越大,页面增多,每次需求中修改一个页面的逻辑后,总会引起其他页面文件的hash改变,导致发布文件过多,提心吊胆的发布,而且文件hash的频繁变动,也没有办法很好利用浏览器缓存。那么有没有办法减少文件的修改呢? 下面以一个简单的例子来分析下。

项目简介

项目的目录结构如图:

整个项目采用react + webpack架构 , 页面文件放在pages下面。

构建的入口是每个页面的入口,使用CommonsChunkPlugin将项目的基础库打包到vendor中,便于做缓存,使用web-webpack-plugin组织页面文件。

感兴趣的可以访问 demo , 自己跑的试试。

下面开始分析优化带来的影响。

使用chunkhash代替hash

  • chunkhash是根据每个chunk内容计算出的hash值。只要chunk不变,hash就不变。
  • hash是compilation对象计算所得,而不是具体的项目文件计算所得,只要文件有改动,compilation就会被重新创建,整个项目构建的hash值都会更改。

以上,采用chunkhash代替hash应该是没有异议的。

去掉vendor中的runtime

运行上面的demo,结果如下 :

修改index页面, 再次跑构建,结果为:

对比可以发现,只是修改了一个页面的业务逻辑,使得vendor的hash发生了改变 , 由于每个页面文件都会引用vendor,会导致页面文件也会添加到发布list中。

分析打包后的vendor可以发现,

vendor里包含了index和home的hash信息, 这其实是使用CommonsChunkPlugin提取公共代码时,将页面的运行时信息,放到了vendor。

解决办法:

1、demo里的webpack是3.0.0,只要升级到3.11.0,就可以解决, 官方修复了这个bug。页面文件的hash信息不会被引入到运行时里面。

2、如果不想升级webpack , 可以将runtime提取出来,内联到页面中,保持vendor的hash不受影响。像下面这样使用,就可以了。

    new webpack.optimize.CommonsChunkPlugin({
      name: ['vendor', 'runtime'],
      minChunks: 5,
    });

经过以上步骤, 在页面中修改文件,不会影响到其他目录了。但这样就ok了吗?请接着看

固定moduleId

在home页面添加一个js文件,被index.js引用,增加前后构建结果如下:

可以看出在其中一个页面添加模块后,引起了所有文件的hash改变。从截图中可以看出,模块id都是数字,且由于插入进来a.js这个模块,使得原本分配好的模块id,重新按顺序分配。 模块id的变化,引起了文件hash的变化。

解决办法:

    new webpack.HashedModuleIdsPlugin({
      hashDigestLength: 10,
    }),

使用模块hash来代替模块id, 只要模块内容不变,就不会引起文件hash的改变。

固定moduleId, 构建结果如下:

可以看出,之前数字的moduleId,全部替换成了hash。

固定chunkId

上面讲了添加一个模块会引起moduleId的重新分配, 那如果是添加一个构建入口呢,会引起chunkId重新分配吗? 答案是会。 构建结果如下:

如图,新加了一个index2的页面, 可以看到红框处,chunkId和之前文件的对应关系变了,所以导致其他页面和vendor发生了更改。 解决办法:

new webpack.NamedChunksPlugin(),

使用chunk的名字来作为chunk的id, 构建结果为:

到这里优化就已经完成了。

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack 4 如何优雅打包缓存文件

    一般来说,对于静态资源,我们都希望浏览器能够进行缓存,那样以后进入页面就可以直接使用缓存资源,页面直接直逼火箭速度打开,既提高了用户的体验也节省了宽带资源。

    IMWeb前端团队
  • 分享几个便利的工具软件

    要掌握功能强大,操作简单的标签页,只需记住Ctrl+T新开页面,Ctrl+W关闭页面,Ctrl+Tab切换页面,工作效率提高何止一倍!

    IMWeb前端团队
  • 分享几个便利的工具软件

    clover 官方网址:http://cn.ejie.me/ 方便的 Tab 页功能 要掌握功能强大,操作简单的标签页,只需记住Ctrl+T新开页面,Ctrl+...

    IMWeb前端团队
  • 纸壳CMS 3.0升级.Net Core 2.1性能大提升

    微软发布了.Net Core 2.1正式版,纸壳CMS也在第一时间做了升级,并做了一系列的优化和调整,性能大幅提升,并解决了一些历史遗留问题,添加了一些新功能。

    Mr. Wei
  • Java Web项目,Android和微信小程序的初始页面配置

    我们在Eclipse里开了Java Web项目之后,Run As Tomcat或者Apache服务器,本地运行,如果直接用http://localhost:80...

    Jerry Wang
  • -bash: ip: command not found

    Linux
  • Python3 | Django后台管理框架Xadmin安装指南python3主环境django安装xadmin

    Django是python的重量级web框架,写得少,做得多,非常适合后端开发,它很大的一个亮点是,自带后台管理模块,但它自带的后台管理有点丑,而Xadmin...

    zhaoolee
  • Python使用xadmin注意事项

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明...

    bering
  • Java自动化测试(Android app界面元素 33)

    开发成本较低,可以跨平台,调试方便,维护成本低,功能可复用,性能和体验要比web app好,更新较自由

    zx钟
  • 在kubernetes中用Glusterfs做持久化存储

    我们经常会用NFS做后端存储来做测试,因为其部署简单。但是在生产中我们并不会去选择NFS,更多的是Ceph、Glusterfs等等,今天就来带大家了解在kube...

    极客运维圈

扫码关注云+社区

领取腾讯云代金券