webpack长缓存优化

时间：2020-03-29 22:43:28 阅读：239 评论：0 收藏：0 [点我收藏+]

1. 文件不随编译变化

文件hash不使用[hash]，而使用[chunkhash]，使得文件只随着内容变化，不随着编译变化，[hash]是每次编译都变化一次

2. css文件不受js模块变化影响

css文件hash使用contenthash，这样不受js模块变化影响

3. 提取vendor

公共库不受业务模块变化影响

4. 内联webpack runtime到页面

chunkId变化不影响vendor，不占用http请求，使用chunk-manifest-webpack-plugin提取，gulp-inject插入到页面

5. 保证module Id稳定

模块的新增或删除，会导致其后面的所有模块id重新排序，为避免这个问题，不使用数字作为模块id，改用文件内容的hash值，使用HashedModuleIdsPlugin可以解决

6. 保证chunkhash稳定

使用webpack-chunk-hash，替代webpack自己的hash算法。webpack自己的hash算法，对于同一个文件，在不同开发环境下，会计算出不用的hash值，不能满足跨平台需求。

原文地址：https://www.cnblogs.com/mengff/p/12595541.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

周排行