项目说明

1. 依赖下载 npm i
2. 项目启动 npm start
3. 项目打包 npm run build
4. 入口文件通过main.js注册，src文件夹内编写文件代码

支持SourceMap（提升开发体验）

1. SourceMap(源代码映射)是一个用来生成源代码与构建后代码一一映射的文件的方案。

2. 他会生成一个xxx.map文件，里面包含源代码和构建后代码每一行、每一列的映射关系。当构建出错了，会通过xxx.map文件，从构建后代码出错位置找到映射后源代码出错位置，从而让浏览器提示源代码文件出错位置，帮助我们更快的找到错误根源。

3. 开发模式：cheap-module-source-map

   1. 优点：打包编译速度快，只包含行映射

   2. 缺点：没有列映射

   module.exports = {
   // 其它省略
       mode : "development",
       devtool : "cheap-module-source-map",
   }

4. 生产模式：source-map

   1. 优点：包含行/列映射

   2. 缺点：打包编译速度更慢

   module.exports = {
   // 其它省略
       mode : "development",
       devtool : "source-map",
   }

支持HMR（提升开发体验）

1. 背景：开发时我们修改了其中一个模块代码，webpack默认会将所有模块全部重新打包编译（浏览器页面刷新），速度很慢。所以我们需要做到修改其中某个模块代码，就只有这个模块代码需要重新打包编译，其它模块不变，这样打包速度就能很快。

2. HotModuleReplacement(HMR/热模块替换)：在程序运行中，替换、添加或删除模块，而无需重新加载整个页面。

3. 可使用react-hot-loader配置此功能

4. 原理： module.hot只在开发模式下可用，并且必须在Webpack的配置中启用HMR。在生产环境中，这些注入的代码会被Webpack自动剔除，以确保最终部署的代码不包含与HMR相关的逻辑。

module.hot.accept("./js/count.js")

支持OneOf（提升打包构建速度）

1. 背景：打包时每个文件都会经过所有loader处理，但一般一种文件类型只由一种test正则匹配，导致构建速度较慢

2. OneOf支持在一次loader匹配之后，剩下的忽略掉。

支持Include/Exclude（提升打包构建速度）

1. 背景：开发时我们需要使用第三方的库或插件，所有文件都下载到node_modules中了。而这些文件是不需要编译可以直接使用的，所以我们在对js文件处理时，要排除node_modules下面的文件。

2. include：包含，只处理xxx文件

3. exclude：排除，处理除了xxx文件以外的其它文件

支持Cache（提升打包构建速度）

1. 背景：每次打包时js文件都要经过eslint检查和babel编译，速度比较慢。我们可以缓存之前的Eslint检查和Babel编译结果，这样第二次打包时速度就会更快了。

2. 效果：对Eslint检查和Babel编译结果进行缓存。

3. babel-loader会将缓存文件存储在node_modules下的.cache文件夹下

4. eslint缓存文件夹目录可配置，配置在了babel-loader的同级文件夹

支持Thread多进程打包（提升打包构建速度）

1. 背景：当项目越来越庞大时，打包速度会变得越来越慢，想要继续提升打包速度，其实就是提升js的打包速度，因为其它的文件都比较少，而对js文件处理主要就是eslint、babel、Terser这三个工具，所以要提升它们的运行速度。使用thread-loader可以开启多进程同时处理js文件，这样速度就比之前的单进程打包更快了。

2. Thread-loader作用：多进程打包，使用cpu的多个进程同时执行loader或plugin

3. 注意：请仅在特别庞大的项目中使用，因为每个进程启动大约有600ms左右的开销。

支持TreeShaking（减小代码体积）

1. 背景：开发时我们定义了一些工具函数库，或者引用第三方工具函数库或组件库。如果没有特殊处理的话打包时会引入整个库，但实际上可能仅用到极小部分的功能，所以需要只打包用到的代码。

2. TreeShaking是一个术语，通常用于描述移除JS中的没有使用的代码。

3. 注意：依赖ES Module

4. webpack已经默认开启了这个功能，无需其它配置。

5. babel为编译的每个文件都插入了辅助代码，使代码体积过大。babel对一些公共方法使用了非常小的辅助代码，比如_extend。默认情况下会被添加到每一个需要它的文件中。需要将这些辅助代码作为一个独立模块。来避免重复引入。

6. @babel/plugin-transform-runtime:禁用babel自动对每个文件的runtime注入，而是引入@babel/plugin-transform-runtime并且使所有辅助代码从这里引入

压缩图片资源（减小代码体积）

1. 背景：如果项目中引入了较多的图片，会导致项目体积偏大，请求速度较慢，需要对图片进行压缩，减小图片体积。

2. 注：如果项目中图片都是在线链接，那么就不需要了。本地项目静态图片才需要进行压缩。

3. image-minimizer-webpack-plugin此plugin可用来压缩图片资源

支持code split（优化代码运行性能）

1. 我对code split的理解：

   1. 使用多入口多输出：这种方式不会达到按需进行网络请求的效果，但是浏览器可以并行请求多个文件，有一定优化

   2. 使用import动态导入语法：这种方式会达到按需进行网络请求的效果，可优化首屏时间(react中使用lazy和Suspense组件路由懒加载就是这个原理)

   3. 使用preload/prefetch：这两种方式优化效果最好，既优化了首屏时间又优化了按需网络请求的时间，但浏览器支持较差（在react中懒加载的路由同样能达到此效果）

2. 背景：打包代码时会将所有js文件打包到一个文件中，体积太大了。如果只要渲染首页，更好的方案是只加载首页的js文件，其它文件不应该被加载。所以需要将打包生成的文件进行分割，生成多个js文件，渲染哪个页面就只加载某个js文件，这样加载的资源更少，速度更快。

3. Code Split（代码分割）主要做了两件事：

   1. 分割文件：将打包生成的文件进行分割，生成多个js文件。

   2. 按需加载：需要哪个文件就加载哪个文件。

   3. react应用中可使用路由懒加载的方式实现。

支持Preload/Prefetch（优化代码运行性能）

1. 背景：之前已经做了代码分割，同时会使用import动态导入语法来实现按需加载（也叫懒加载，路由懒加载的实现原理），但加载速度还有提升空间，比如：当用户点击按钮才加载这个资源，如果资源体积很大，那么请求速度较慢会有一定卡顿。需要在浏览器空闲时间，加载后续需要使用的资源。Preload/Prefetch技术能达到此效果。

2. Preload:告诉浏览器立即加载资源

3. Prefetch:告诉浏览器在空闲时才开始加载资源

4. 共同点：

   1. 都只会加载资源，并不执行

   2. 都有缓存

5. 区别：

   1. Preload加载优先级高，Prefetch加载优先级低

   2. Preload只能加载当前页面需要使用的资源，Prefetch可以加载当前页面资源，也可以加载下一个页面需要使用的资源

6. 总结：

   1. 当前页面优先级高的资源用Preload加载

   2. 下一个页面需要使用的资源用Prefetch加载

7. 问题：兼容性较差。（可在Can I Use网站查询API的兼容问题）

支持Network Cache（优化代码运行性能）

1. 背景：假设main.js文件中引入了math.js文件，当math.js文件改变时，main.js文件也会改变，需要引入一个中间文件，只改变math.js与中间文件，不改变main.js问价，提高缓存效果

2. 使用runtime.js作为中间文件

使用core.js处理兼容性问题（优化代码运行性能）

1. 背景：之前已经使用了babel对js代码进行了兼容性处理，其中使用@babel/preset-env智能预设来处理兼容性问题。它能将ES6的一些语法进行编译转换，比如箭头函数、展开运算符等。但是如果是async函数、promise对象、数组的一些方法（includes等），它没办法处理。所以仅使用babel处理之后js代码仍存在兼容性问题，一旦遇到低版本浏览器会直接报错。所以需要彻底解决js的兼容性问题

2. core-js是专门用来做ES6以及以上API的polyfill。（此项目中无需手动编写，react预设已包含）

module.exports = {
    presets: [
    [
        // 智能预设：能够编译ES6语法
        "@babel/preset-env",
        {
            useBuiltIns: "usage",// 按需加载自动引入
            corejs: 3,// corejs的版本
        },
    ],
    ]
}

支持PWA（提高代码运行性能）

1. 背景：开发web app项目，项目一旦处于网络离线状态，就无法访问了。需要给项目提供离线开发体验

2. 渐进式网络应用程序（progressive web application - PWA）：是一种可以提供类似于native app（原生应用程序）体验的web app技术。其中最重要的是，在离线（offline）时应用程序能够继续运行功能。内部通过Service Workers技术实现。

总结

1. 提升开发体验

   1. 使用Source Map让开发或上线时代码报错能有更加准确的提示

2. 提升webpack打包构建速度

   1. 使用HotModuleReplacement让开发时只重新编译打包更新变化了的代码，不变的代码使用缓存，从而使更新速度更快

   2. 使用OneOf让资源文件一旦被某个loader处理了，就不会继续遍历了，打包速度更快

   3. 使用Include/Exclude排除或只检测某些文件，处理的文件更少，速度更快

   4. 使用Cache对eslint和babel处理的结果进行缓存，让第二次打包速度更快

   5. 使用Thread多进程处理eslint和babel任务，速度更快。（注意：进程启动通信需要时间开销，在大项目下再启用此功能）

3. 减少代码体积

   1. 使用Tree Shaking剔除了没有使用的多余代码，让体积更小

   2. 使用@babel/plugin-transform-runtime插件对babel进行处理，让辅助代码从中引入，而不是每个文件都生成辅助代码，从而体积更小。

   3. 使用Image Minimizer对项目中图片进行压缩，体积更小，请求速度更快。

4. 优化代码运行性能

   1. 使用code Split对代码进行分割成多个js文件，从而使单个文件体积更小，并行加载js速度更快，并通过import动态导入语法进行按需加载，从而达到需要时才加载该资源，不用时不加载资源

   2. 使用Preload/Prefetch对代码进行提前加载，等未来需要使用时就能直接使用，从而用户体验更好

   3. 使用Network cache能对输出资源文件进行更好的命名，将来好做缓存，从而用户体验更好

   4. 使用Core-js对js进行兼容性处理，让我们代码能运行在低版本浏览器

   5. 使用PWA能让代码离线也能访问，从而提升用户体验