create-react-app创建的项目,webpack打包时间查看

最新推荐文章于 2022-12-29 14:31:46 发布

hetingtingisme

最新推荐文章于 2022-12-29 14:31:46 发布

阅读量1.4k

点赞数

分类专栏：前端文章标签： webpack 前端

本文链接：https://blog.csdn.net/hetingtingitsme/article/details/116264262

版权

这篇博客探讨了在create-react-app项目中如何查看webpack打包的时间。由于默认情况下控制台不显示打包耗时，作者建议在scripts的build.js文件中，通过捕获打包成功后的参数stats，并计算endTime与startTime的差值来获取详细打包时间。

摘要由CSDN通过智能技术生成

create-react-app创建的项目都是使用webpack的node.js api去进行打包的，所以控制台不会显示打包耗时

在scripts文件下，找到build.js文件，打包成功参数stats包含了打包信息

 let compiler = webpack(config);
  return new Promise((resolve, reject) => {
    compiler.run((err, stats) => {
      if (err) {
        return reject(err);
      }
      const messages = formatWebpackMessages(stats.toJson({}, true));
      if (messages.errors.length) {
        // Only keep the first error. Others are often indicative
        // of the same problem, but confuse the reader with noise.
        if (messages.errors.length > 1) {
          messages.errors.length = 1;
        }
        return reject(new Error(messages.errors.join('\n\n')));
      }
      if (
        process.env.CI
        && (typeof process.env