【webpack】快速笔记17 -- 中看又中用的可视化打包分析工具

最新推荐文章于 2024-08-12 14:21:39 发布

@Umbrella

最新推荐文章于 2024-08-12 14:21:39 发布

阅读量1k

点赞数

分类专栏：【webpack】文章标签：打包分析工具

本文链接：https://blog.csdn.net/Umbrella_Um/article/details/100179162

版权

【webpack】专栏收录该内容

28 篇文章 2 订阅

订阅专栏

为何需要使用可视化打包分析工具？

我们之前看到的打包文件描述（命令行中）：
在这里插入图片描述
使用可视化打包分析工具：

如果当项目业务不断庞大时，使用可视化工具去分析打包文件的参数、关系及其加载时间等，可以利用它清楚知道哪些模块或者Chunks是可以优化的，或者相关的一些报错处理，可以在分析时提供一定的帮助~

如何使用可视化打包分析工具？

使用webpack官方Git仓库的插件工具：

webpack分析工具的Git仓库：
https://github.com/webpack/analyse

配置 package.json：
在这里插入图片描述

  "scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.dev.js",
    "build": "webpack --config ./build/webpack.prod.js",
    "start": "webpack --profile --json > stats.json --config ./build/webpack.dev.js"  // +- 新增
  }

完成配置后我们运行 npm run start 重新打包，此时根目录多出一个 stats.json 的文件，这个文件其实是对此次打包的项目描述，如果之间看这些代码的话是不可能看明白的里面的参数也很多，此时我们就要回到刚才的github上借助analyse下面的链接（访问这个链接可能需要科学-上网），进去之后它会弹出一个让我们选择文件的框，那我们就将这个 stats.json 这个文件上传上去，然后展示的是这样的（这里就不附上太多图，需要体验的按照上面做即可，切记一定要生成stats.json文件才能使用该工具）：
在这里插入图片描述
使用webpack官方文档中的插件工具：

webpack官网分析工具：
https://webpack.docschina.org/guides/code-splitting/#bundle-分析-bundle-analysis-
在这里插入图片描述
除了第三个其余的三个都是直接导入stats.json 即可查看可视化图标的（第四个除外，它不是图标，他只是给你一点优化的建议），第三个是一个插件，按照里面的安装及配置通过打包后就会自动生成一个比较详细的图标（推荐~）

结语

关于webpack可视化打包分析工具介绍就这么多，学会通过可视化工具去优化打包内容，才是工具所希望你得到的，好好使用~

#下一篇【如何提高代码使用率及preloading与prefetching到底有多强大~ 】

补充： We noticed you’re using the `useBuiltIns` option without declaring a core-js version 警告解决

在前几篇已经出现这个警告了，为什么放在这讲解？

因为解决这个警告后出现了Bug，这个Bug会对可视化打包分析工具造成影响我们往下看 ↓
在这里插入图片描述
命令行已经给出解决方案了，我们根据提示可以安装 npm install --save core-js@2或者 npm install --save core-js@3，我们这里先测试core-js@2的，但是我们发现即使安装之后还会报错，通过查阅资料发现只安装插件当然是不够的，我们还需要声明核心JS版本，也就是在.babelrc中添加上这句话：

{
    "presets":[
        ["@babel/preset-env", {
            "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "67",
                "safari": "11.1",
            },
            "corejs": "2",   //  + 新增
            "useBuiltIns": "usage"
            }
        ],
        "@babel/preset-react"
    ]
}

安装哪个版本的core-js就填对应的数值即可，关于2 | 3是什么意思前面文章也有提及，这里就不在重复，可自行查询babel的文档 → https://babeljs.io/docs/en/babel-plugin-transform-runtime

然后我们重新打包，此时该警告就已经解决了，此时使用可视化打包分析工具时也并没有问题，我们关注一下这个modules的打包数 ↓
在这里插入图片描述
那之前说的Bug问题在哪？

其实刚才演示的是正确无Bug的做法，如果按照上面解决警告的方法，此时我们安装core-js@3，并且配置选项也为3时，此时使用可视化打包分析工具后打包的modules数竟然把node_modules里的第三方插件库也打包进去了（这里可以对比前后的两种的main.js打包文件）↓
在这里插入图片描述
至于原因，小弟暂时没有找到对应的解决方法，如果有大佬的话可以指点指点小弟，至于现在就先用着core-js@2解决这个警告并且不触发这个可视化打包分析工具的Bug（其实也就是为什么babel为什么配置了exclude了node_modules，在core-js@3中失效了的问题~）