在webpack中,缓存可分为编译缓存和文件缓存两部分,其中,编译缓存指的是启动webpack时减少其编译源代码的时间,而文件缓存我们主要是指让浏览器缓存我们的静态资源文件,只有页面第一次被加载时才请求服务器,从第二次开始直接从缓存里进行读取。
编译缓存
编译缓存我们主要指的还是babel与loader这两块。
开启bebel缓存
使用 cacheDirectory: true
来开启babel的编译缓存。
// webpack.config.js |
文件缓存
文件缓存我们主要是通过 hash
文件名的方式来实现,简单来说,就是你把构建后的静态资源文件以hash值命名就可以了,其它的交给浏览器和后台。
在webpack中,hash的类型有3种:
- hash:每次构建都会生成全新的hash。
- chunkhash:根据文件所在的代码块进行hash,如果多个文件所在的代码块相同,则这些文件所对应的hash也相同,换句话说,就是多个文件可能存在hash一样的情况。
- contenthash:根据文件的内容来生成hash,只要文件的内容发生变化,该文件的hash就会发生变化,否则不变。
// webpack.config.js |
就跟上面的写法类似,假如其它地方也需要使用hash来给文件命名,参照上面的写法就可以了。
loader优化
最后我们说一下loader的优化问题。
我们的loader配置都是写在 rules
中,我们可能会碰到一个类型的文件有可能会被多个loader进行处理的情况,这不否认,但也可能会存在其它只需要被执行一次的文件,我们可以用 oneOf
来优化一下。
// webpack.config.js |