webpack优化

46 阅读1分钟

1、提升开发体验

使用SourceMap让开发或上线时代码报错能有更加准确的错误提示

2、提升webpack打包构建速度

使用OneOf让资源文件一旦被某个loader处理了 就不会继续遍历了 使用IncludeExclude 只检测或者排除一些文件,使得处理的文件更少 使用cache对eslint和babel处理的结果进行缓存 使用多线程

3、减少代码体积 使用 Image Minimizer 对项目中图片进行压缩,体积更小,请求速度更快 使用 Tree Shaking 剔除了没有使用的多余代码,让代码体积更小。 使用 @babel/plugin-transform-runtime 插件对 babel 进行处理,让辅助代码从中引入,而不是每个文件都生成辅助代码,从而体积更小。

  1. 优化代码运行性能

使用 Code Split 对代码进行分割成多个 js 文件,从而使单个文件体积更小,并行加载 js 速度更快。并通过 import 动态导入语法进行按需加载,从而达到需要使用时才加载该资源,不用时不加载资源。 使用 Preload / Prefetch 对代码进行提前加载,等未来需要使用时就能直接使用,从而用户体验更好。 使用 Network Cache 能对输出资源文件进行更好的命名,将来好做缓存,从而用户体验更好。 使用 Core-js 对 js 进行兼容性处理,让我们代码能运行在低版本浏览器。 使用 PWA 能让代码离线也能访问,从而提升用户体验。