它可以直观分析打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何，针对这些，我们可以进行文件分割等操作。
分析内容：如图所示，打包出的文件包含哪些，大小占比如何，模块包含关系，依赖项，文件是否重复，压缩后大小如何
步骤如下：
1. 安装：npm install webpack-bundle-analyzer --save-dev
2. 配置：
webpack.config.js:
// 分析包内容 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin; module.exports = { plugins: [ // 开启 BundleAnalyzerPlugin new BundleAnalyzerPlugin(), ], };
在package.json中的script中补上：
"analyze": "NODE_ENV=production npm_config_report=true npm run build”
运行： npm run analyze
最后 http://127.0.0.1:8888
Preloading, Prefetching异步模块懒加载
我们在webpack 配置项中，optimizaiton.splitChunks.chunks 不是‘all’ 而是‘async’。也就是默认只对异步加载代码进行分割。而代码分割，比如 lodash 实际上，是对第二次加载时会有性能提升（从缓存中获取），而对第一次页面加载是没有大的提升的（除了页面加载后触发某一条件下才进行异步加载）。
而真正对页面性能做优化，我们希望的是，当第一次访问页面的时候，它的加载速度就是最快的。那么上面的仅进行代码分割，是满足不了需求的。所以就有了Preloading，Prefetching。
我们先将项目webpack.config.js 代码分割部分配置改简单一些：
optimization: { splitChunks: { chunks: 'async' } },
然后，我们把index.js 中的代码稍微改一下。
document.addEventListener('click', () => { const element = document.createElement('div'); element.innerHTML = 'hello hello'; document.body.appendChild(element); })
然后，打包，运行页面。
那么这段代码是否有优化空间呢？有！
我们在页面里打开（chrome）控制台，然后在控制台里输入 Comand+Shift+p , 然后在搜索框中输入 coverage 关键词，打开show coverage .如图
然后我们点击左边录制的圆点，刷新。下面显示了，代码未使用率是17%
实际上，我们看到，document 的click 的事件处理函数代码，它在页面刷新的时候是放在Unused Bytes 中的。如果这部分代码量很大，而它在页面加载的时候不需要用到，那么把它放在页面加载的时候一起加载，是会拖慢页面首次加载的性能的。
因此，比较好的方式是，这种异步交互的代码，放在一个单独的模块中编写。
比如，我们在src 下新建一个click.js 文件，如下。
function handleClick () { const element = document.createElement('div'); element.innerHTML = 'hello hello'; document.body.appendChild(element); } export default handleClick;
然后，再修改一下index.js 文件，如下。
document.addEventListener('click', () => { import('./click.js').then(({default: func}) => { func() }) })
下面，我们运行打包命令，然后重新刷新一下页面，发现，Unused Bytes 百分比反而增加了。这是为什么呢！因为我们的代码量变少了！hhh...
来看看，打包后的代码，如下。click 事件处理函数现在变得比以前少了，因此分母小了。
当然，在我们点击页面后，百分比就降下来了。
这种方式，是让页面较快加载的方式！
当我们用这种方式编写代码的话，我们是可以在交互的时候，再去发送网络请求，加载交互代码，但是这也有一个问题。当交互发生时，才去网络请求代码，然后执行代码，那么可能会影响交互性能。那么我们希望首屏核心代码加载不会变慢，后续交互操作也很顺畅，那么就可以通过，在首屏核心代码加载后，再程序自己去加载一些交互代码，类似偷偷地加载。这种方式，就得依赖Preloading, Prefetching 这种打包特性来实现。
参考官网：documentation > guides > code splitting > Prefetching/Preloading Modules
使用magic comment 语法，如下（index.js）
document.addEventListener('click', () => { import(/* webpackPrefetch: true */ './click.js').then(({default: func}) => { func() }) })
上面的意思是，当点击页面的时候加载click.js，但不是非要等到点击的时刻去加载。一旦发现，目前主要的js 都加载完成了之后，网络带宽有空闲的时候，就可以加载了。
然后打包，刷新页面。会发现，分割的js 文件，就不是在点击页面的时候加载了，它会提前加载。再点击页面的时候，就会使用缓存中的文件了。
preloading 与 prefetching 的主要区别是，prefetching 的代码会等到主要的js代码加载完 浏览器空闲时才会去加载，preloading 代码会与主要的js 代码一起加载。官网解释如下，更详细的应该翻阅官网。
因此，这里推荐的提高性能的一个思路是，提高代码的利用率，把一些代码放入异步加载中，使用懒加载 prefetching 的方式加载。
原文链接：https://blog.csdn.net/purple_lumpy/article/details/100073807
原文链接：https://blog.csdn.net/yuanfangyoushan/article/details/107191287