追踪打包时间

speed-measure-webpack-plugin 插件用来展示每个打包环节所用的时间。

  1. const resolveApp = require('./paths')
  2. const HtmlWebpackPlugin = require('html-webpack-plugin')
  3. const { merge } = require('webpack-merge')
  4. const MiniCssExtractPlugin = require('mini-css-extract-plugin')
  5. // 时间分析
  6. const SpeedMeasurePlugin = require("speed-measure-webpack-plugin")
  7. const smp = new SpeedMeasurePlugin()
  9. const commonConfig = (isProduction) => {
  10.   // ...
  11. }
  12. module.exports = (env) => {
  13.   const isProduction = env.production
  15.   process.env.NODE_ENV = isProduction ? 'production' : 'development'
  17.   // 依据当前的打包模式来合并配置
  18.   const config = isProduction ? prodConfig : devConfig
  20.   const mergeConfig = merge(commonConfig(isProduction), config)
  22.   return smp.wrap(mergeConfig)
  23. }

image.png

内容分析

  1. const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  3. plugins: [
  4.     new BundleAnalyzerPlugin()
  5.   ]
  1. 打包之后会在浏览器自动打开一个矩形树图，用以描述打包后的文件关系：<br />![image.png](https://cdn.nlark.com/yuque/0/2021/png/21429065/1633796908282-e63edf2c-cf1a-447a-9149-55db80e23c3f.png#clientId=u6033a32a-5d2c-4&from=paste&height=488&id=ue0ea39ba&margin=%5Bobject%20Object%5D&name=image.png&originHeight=975&originWidth=1905&originalType=binary&ratio=1&size=726644&status=done&style=none&taskId=u73c011c5-2f5b-4f46-b6d3-f0b377a34c8&width=952.5)