脚手架版本 17

打包文件分析

插件 source-map-explorer(官方推荐～)

在package.json文件中添加命令，这里有一个注意点就是(如果将source-map文件删除掉将无法进行打包分析)

运行 npm run analyze 就会打开一个网页，注意看网页中的包体积大小，针对优化
这一步很重要～～～～～～～～～～

build中显示打包时间总长

打开scripts > build.js > build函数

 const compiler = webpack(config); // 这个compiler中会包含打包时间
 // 正确的来说是他run的时候回调第二个stats参数会包含，第一个是err

 // 我写在了这个return上面～～ 位置不是固定的，随意～显示方式根据个人喜好来决定它如何显示～
 console.log('time：', parseFloat((stats.endTime - stats.startTime) / 1000))
 return resolve(resolveArgs);

plugin or loader耗时分析

插件 speed-measure-webpack-plugin;

const SpeedMeasurePlugin=require('speed-measure-webpack-plugin');
const smp = new SpeedMeasurePlugin();

直接裹！

运行npm run build,就可以在终端中看到耗时了～

source map文件删除

打包完毕后发现build文件很大且多出来了很多Source map文件，
这个map文件有优点也有缺点具体的可以去看各个博客看一下，
优点

主要是帮助精准定位错误

缺点

体积占用很大
如果有sentry监控系统的话，将sourmap文件删除掉，将不会显示报错具体行数及具体报错代码

需要保存还是去掉的话具体还是要看项目取舍~~

如果想要去控制生产环境不build映射文件，dev环境build映射文件，搜索shouldUseSourceMap，然后添加到对应的环境变量去控制～
在浏览器的Sources中可以看到源码，不想让用户看到源码可以去掉source-map文件

本人去掉source map后项目体积减少了百分之五十七

打开webpack.config.js, 搜索 devtool

devtool: isEnvProduction 
        ? shouldUseSourceMap
           ? 'source-map'
           : false
        : isEnvDevelopment && 'cheap-module-source-map'
        
 只需要将上面。 shouldUseSourceMap的这个三目运算符去掉，改成false就可以了

本地预压缩

插件 compression-webpack-plugin插件
作用： 在webpack打包过程中进行gzip压缩，服务器需要开启gzip压缩（webpack压缩有成本，项目不大的话,build体积会增加）
好处：减少服务器部分压力，进而转换到个人电脑，如果服务器发现同名的.gz会主动读取，不会主动压缩，优化了服务器性能

如果在6x以上的话会导致报错 tapPromise of undefined,挨个版本降级，到6x就没问题了

请求gzip文件原理，两个字段

Accept-Encoding: gzip, deflate,br
content-encoding: gizp

浏览器发起请求的时候默认Request Headers里面有一个字段 Accept-Encoding: gzip, deflate,br。
意思是希望这个请求内容被压缩，减少网络流量，但是这个不是强制的

如果服务器支持压缩或者开启压缩，则会在响应头中增加字段。content-encoding: gizp

更多配置请移步文档～

 new CompressionPlugin({
        filename: '[path].gz[query]',
        algorithm: 'gzip', //  brotliCompress 还有一种这个算法 谷歌提供的，比gzip优异，但是gzip经过了验证～
        test: /\.(js|css|html|svg)$/,
        threshold: 6144,
        minRatio: 0.8, // 比这个小的 压缩率 = 压缩后的大小 / 原始大小
        deleteOriginalAssets: false, // 是否删除原始资源。
      }),

开启缓存

loader: babel-loader

为什么要开启缓存，可能会生成一些运行期间重复的公共文件，造成代码体积大冗余，同时也会减慢编译效率 babel-loader默认缓存目录:node_modules/.cache/babel-loader,找不到的话，将会降级回退到操作系统默认的临时文件目录。

当设置了缓存之后，二次打包将会得到大幅度提升

option:{
   cacheDirectory: true,
}

多进程打包（webpack版本<4的可以使用～）

插件 HappyPack

大意是说webpack4性能在已经提高了，这个插件作用对于webpack4不是很明显，作者对这个项目的兴趣正在降低，如果有人想接手，随时联系他就可以

webpack4推荐使用 thread-loader进行多进程打包

这里有一个注意的点就是，thread-loader会对后面的loader进行多进程打包，由于其启动成本比较昂贵(600ms左右)，不要滥用～

比如我这个是针对babel-loader进行的多进程打包(开启了babel的缓存，皆为二次打包)

开启前为11.315秒

开启后为13.539秒

进行了一波负优化，如项目没有大到一定的地步可以不要使用～
使用情况要根据项目实际情况进行优化

多进程压缩JS

插件：terser-webpack-plugin(内置了～～)

模块化引入

原来的引入方式
import { get } from 'lodash'

// 模块化
import get from 'lodash/get'

Create-react-app17_webpack4 优化