vue2项目编译webpack耗时统计

vue2项目编译webpack耗时统计

1. 手动统计耗时

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

• 原108行加入命令：

    const beginTime = Date.now()

• 原209~210行之间加入代码：

    const endTime = Date.now()
    info(`编译耗时：${chalk.cyan((endTime - beginTime) / 1000)}(s)`)

• npm run build即可看出编译总耗时

2. 使用第三方工具（推荐）

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