webpack基础优化

webpack基础优化

增加开发体验

SourceMap

用于代码出错时，快速定位到自己代码的位置。下面主要介绍两种常用的，有兴趣可以自行官网查看 官方文档

开发中主要用到的两种模式是：

1. cheap-module-source-map：主要用于开发模式，只有行映射，没有列映射。但是打包速度快，而且开发模式下，没有进行代码压缩，所以够用了。

2. eval-cheap-module-source-map ： 主要用于生产模式，包含行列映射，但是打包速度会较慢。生产模式代码进行压缩，只有一行，所以必须要列映射。

打包构建速度

HotModuleReplacement

哪个模块被修改，只需要重新打包编译那个模块就行了。其他模块无需发生变化。

hot: true, // 开启HMR功能（只能用于开发环境，生产环境不需要了）

OneOf

每个文件只会被 loader 中的一个 loader配置处理

用法：直接使用 oneOf包裹住所有的 loader 配置

Include/Exclude

对 js 文件处理时，不需要对 node_modules 下的文件进行处理。所以需要排除掉 node_ modules 下的文件。

1. include：只处理 xxx 文件

2. exclude ： 除 xxx 文件外，其他文件都处理

Cache

用于缓存之前的 Eslint 检查 和 Babel 编译结果。这样下次打包就可以直接引用，速度较快。

Thead

多进程同时处理 js 文件。同时使用 eslint、babel、terset 三个工具对 js 进行处理。但是有较大开销。

减少代码体积

Tree Shaking

引入库的时候，移除 js 中 没有使用到的代码。也就是按需引入。 webpack 默认开启这个功能了。

Babel

将 babel 为每个文件插入的辅助代码放到一个独立模块，让需要的地方自己来引入。避免重复引入。

image Minimizer

对图片进行压缩（本地项目中静态图片才需要进行压缩）

代码运行性能

Code Split

将打包生成的文件进行分割，生成多个 js 文件。然后进行按需加载。

Preload / Prefetch

在空闲时间能自动加载后续所需的资源。兼容性都比较差。

1. Preload ： 告诉浏览器马上加载资源，加载优先级高，只能加载当前页面所需的资源。

2. Prefetch ：告诉浏览器在空闲时间加载资源，加载优先级低，可以加载当前页面资源，也可加载下一个页面所需的资源。

Network Cache

对静态资源进行缓存，二次请求时就可以直接走缓存，速度比较快。使用不同的hash值作为更新前后的文件名，就可以区分缓存了。

    1.fullhash（webpack4 是 hash）

每次修改任何一个文件，所有文件名的 hash 至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。

    2.chunkhash

根据不同的入口文件(Entry)进行依赖文件解析、构建对应的 chunk，生成对应的哈希值。我们 js 和 css 是同一个引入，会共享一个 hash 值。

    3.contenthash

根据文件内容生成 hash 值，只有文件内容变化了，hash 值才会变化。所有文件 hash 值是独享且不同的。

Core-js

babel 只能对 ES6 部分语法进行编译，如箭头函数、rest等等。其他的没办法处理。剩下的就使用 Core-js 进行处理。

PWA

给项目提供离线体验

学习地址