分析一：打包的时间分析

如果我们希望看到每一个loader、每一个Plugin消耗的打包时间，可以借助于一个插件：speed-measure-webpack-plugin
注意：该插件在最新的webpack版本中存在一些兼容性的问题（和部分Plugin不兼容）
截止2021-3-10日，但是目前该插件还在维护，所以可以等待后续是否更新；
我这里暂时的做法是把不兼容的插件先删除掉，也就是不兼容的插件不显示它的打包时间就可以了；
第一步，安装speed-measure-webpack-plugin插件
第二步，使用speed-measure-webpack-plugin插件
创建插件导出的对象 SpeedMeasurePlugin；
使用 smp.wrap 包裹我们导出的webpack配置；

分析二：打包后文件分析

方案一：生成一个stats.json的文件
"buiebpack ld:stats": "w--config ./config/webpack.common.js --env production --profile --json=stats.json",
通过执行npm run build:status可以获取到一个stats.json的文件：
这个文件我们自己分析不容易看到其中的信息；
可以放到 https://webpack.github.io/analyse/，进行分析
方案二：使用webpack-bundle-analyzer工具
另一个非常直观查看包大小的工具是webpack-bundle-analyzer。
第一步，我们可以直接安装这个工具：npm install webpack-bundle-analyzer -D
第二步，我们可以在webpack配置中使用该插件：
在打包webpack的时候，这个工具是帮助我们打开一个8888端口上的服务，我们可以直接的看到每个包的大小。
比如有一个包时通过一个Vue组件打包的，但是非常的大，那么我们可以考虑是否可以拆分出多个组件，并且对其进行懒加载；
比如一个图片或者字体文件特别大，是否可以对其进行压缩或者其他的优化处理；

webpack打包分析相关推荐

html 打包优化,Webpack打包优化
一.前言对于使用vue开发项目的FE来说,打包上线这个环节相信大家都不陌生.本文主要是介绍如何通过webpack(实践版本:webpack4.16.5)的配置来提高打包构建速度以及减小包的体积. 二 ...
webpack打包之sourcemap
认识sourcemap 我们的代码通常运行在浏览器上时,是通过打包压缩的: 也就是真实跑在浏览器上的代码,和我们编写的代码其实是有差异的: 比如ES6的代码可能被转换成ES5: 比如对应的代码行号.列 ...
webpack 深入浅出分析之打包 JS、ES6 和 Typescript
一.webpack 打包 JS 文件通过 npm install webpack 命令可以下载 webpack,通过 npm install webpack-cli -g 命令下载 webpack- ...
Webpack打包后模块分析
测试代码如下代码为要打包的代码以及相应的模块 // index.js const calculator = require('./calculator.js'); const sum = calcu ...
atool-build脚手架分析与webpack打包原理详解
最近要做一个js解析markdown的项目,所以当然想到了ant design,不过ant design内部又使用了atool-build脚手架,所以决定好好研究一下.如果有不对的地方还烦请指正.不过 ...
webpack系统学习（六）打包分析，Preload和Prefetch
1. 打包分析我们需要在使用webpack的时候添加一些配置: webpack --profile --json > stats.json 这个配置会在打包完成之后生成一个stats.json ...
Webpack：打包分析，Preloading, Prefetching
打包分析概念当用webpack代码打包之后,可以借助打包分析的工具对打包生成的文件进行一定的分析,分析打包是否合理分析工具:https://github.com/webpack/analyse 分 ...
webpack打包原理和manifest文件分析
打包工具要解决的问题: 文件依赖管理梳理文件之间的依赖关系资源加载管理处理文件的加载顺序(先后时机)和文件的加载数量(合并.嵌入.拆分) 效率与优化管理提高开发效率,完成页面优化 webpac ...
webpack打包后的文件
用了webpack打包工具,你是不是有时会疑惑,写了一个很简单的函数,结果生成那么多东西,而且还没有问题?下面,我从三种情况来分析打包后的入口文件,帮助自己理解webpack打包,也为平时定位产出目录 ...

webpack打包分析

分析一：打包的时间分析

分析二：打包后文件分析

webpack打包分析相关推荐

最新文章

热门文章