Code splitting 代码分割
是否能够导出公共模块,避免重复打包;
以及在页面加载运行时,实现最合理的按需加载策略
Hashing 哈希
对打包资源进行版本信息映射,最大化的利用缓存机制(比如webpackdevserver的热更新)
如何区分webpack中的hash/chunkhash/contenthash
- hash反映的是项目的构建版本,同一次构建过程中生成的hash都是一样的
hash策略带来的问题是:即使某个模块的内容压根没有改变,但是重新构建后会产生新的hash值,使得缓存命中率较低- chunkhash会根据入口文件(Entry)进行依赖解析
chunkhash带来的问题是:如果index.js依赖一些文件,index.js发生变化即使其他依赖文件没有变动,也会重新对齐进行构建- contenthash则会根据文件具体内容生成hash值
Importing modules 依赖机制
前端现存CommonJS、AMD、ESM等不同的模块化规范,所以构建工具需要具有兼容这些规范的能力
另外,由于npm的存在,构建工具也得具有根据npm从node modules引入依赖模块的能力
Non-Javascript resources 非JavaScript资源导入的支持能力
诸如对html,css,image等的导入
Transformations 转义
对于JavaScript的代码压缩,无用代码的删除
但是对于类似jsx、.vue文件、es相关代码的编译,不会内置到构建工具中,而是利用babel等社区能力,融合到构建流程中
网友评论