美文网首页
vue2项目编译webpack耗时统计

vue2项目编译webpack耗时统计

作者: 太_2_真_人 | 来源:发表于2021-03-26 10:16 被阅读0次

vue2项目编译webpack耗时统计

1. 手动统计耗时

vue编译命令npm run build,其实际使用的命令是vue-cli-service build,路径是node_modules\@vue\cli-service\lib\commands\build\index.js

  • 原108行加入命令:
```javascript
  const beginTime = Date.now()
```
1108210880-6059d07a89aae_fix732.png
  • 原209~210行之间加入代码:
```javascript
  const endTime = Date.now()
  info(`编译耗时:${chalk.cyan((endTime - beginTime) / 1000)}(s)`)
```
443848835-6059d0887c004_fix732.png
  • npm run build即可看出编译总耗时
    3327643274-6059d0953d0a4_fix732.png

2. 使用第三方工具(推荐)

speed-measure-webpack-plugin每一项耗时都有精确统计,搭配使用webpack-bundle-analyzer打包后的各个模块文件大小,直观明了,根据具体项目再去进行优化。

相关文章

网友评论

      本文标题:vue2项目编译webpack耗时统计

      本文链接:https://www.haomeiwen.com/subject/sfokhltx.html