webpack打包时间检测并优化

如何查看打包时间呢？

找到node_modules/@vue/cli-service/lib/commands/build/index.js

在build函数中第一行添加

async function build (args, api, options) {
  
  // 打包开始时间
  startTime = Date.parse(new Date())

  const fs = require('fs-extra')
  const path = require('path')
  const webpack = require('webpack')
  const { chalk } = require('@vue/cli-shared-utils')
  // ......
}

在build函数返回的Promise中添加

 // .....
 if (args.target === 'app' && !isLegacyBuild) {
    if (!args.watch) {
      // 需要添加的内容
      console.log('结束时间戳：'+Date.parse(new Date()))
      console.log('花费时间：'+(Date.parse(new Date())-startTime)/1000+'秒')
      // -------------------------
      done(`Build complete. The ${chalk.cyan(targetDirShort)} directory is ready to be deployed.`)
      info(`Check out deployment instructions at ${chalk.cyan(`https://cli.vuejs.org/guide/deployment.html`)}\n`)
    } else {
      done(`Build complete. Watching for changes...`)
    }
  }

优化部分

splitChunk

module.exports = {
  //...
  optimization: {
    splitChunks: {
      chunks: 'async', // 按需
      minSize: 20000,
      minRemainingSize: 0,
      minChunks: 1,
      maxAsyncRequests: 30, // 按需加载时最大的并行请求数
      maxInitialRequests: 30, // 入口点的最大并行请求数
      enforceSizeThreshold: 50000,
      cacheGroups: {
        vantUI: {
          name: 'chunk-vantUI', // 单独将 vantUI 拆包
          priority: 20, // 数字大权重到，满足多个 cacheGroups 的条件时候分到权重高的
          test: /[\/]node_modules[\/]_?vant(.*)/
        },
        pdfjsDist: {
          name: 'chunk-pdfjsDist', 
          priority: 10,
          test: /[\/]node_modules[\/]_?pdfjs-dist(.*)/
        }
      },
    },
  },
};