webpack之利用缓存提高二次构建速度

46次阅读

共计 699 个字符,预计需要花费 2 分钟才能阅读完成。

1.babel-loader 开启缓存

官方文档中的说明:https://webpack.docschina.org…
cacheDirectory:默认值为 false。当有设置时,指定的目录将用来缓存 loader 的执行结果。之后的 webpack 构建,将会尝试读取缓存,来避免在每次执行时,可能产生的、高性能消耗的 Babel 重新编译过程 (recompilation process)。如果设置了一个空值 (loader: ‘babel-loader?cacheDirectory’) 或者 true (loader: ‘babel-loader?cacheDirectory=true’),loader 将使用默认的缓存目录 node_modules/.cache/babel-loader,如果在任何根目录下都没有找到 node_modules 目录,将会降级回退到操作系统默认的临时文件目录。
开启缓存之后,可以在 node_modules 下看到有一个.cache 文件

发现官网说的方式并不生效,需要修改成写在 option 里面才生效

2.terser-webpack-plugin 开启缓存


其中 parallel 是 使用多进程并行运行可提高构建速度,明显提升构建速度
cache 启用文件缓存。缓存目录的默认路径:node_modules/.cache/terser-webpack-plugin。
此配置 在使用 UglifyJSWebpackPlugin 时同理。

3.hard-source-webpack-plugin


用于为模块提供中间缓存步骤 存在 node_modules/.cache/hard-source 下, 能明显提升构建的速度!!

正文完
 0