码迷,mamicode.com
首页 > Web开发 > 详细

webpack长缓存优化

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

标签:run   end   自己   hash算法   ids   hunk   spl   eid   webpack   

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值,不能满足跨平台需求。

webpack长缓存优化

标签:run   end   自己   hash算法   ids   hunk   spl   eid   webpack   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有 京ICP备13008772号-2
迷上了代码!