Webpack 性能分析

[maomao1996]

Webpack 性能分析

打包速度分析 speed-measure-webpack-plugin

yarn add -D speed-measure-webpack-plugin
# OR
npm install -D speed-measure-webpack-plugin

speed-measure-webpack-plugin | GitHub

create-react-app

react-app-rewired + customize-cra 方案

修改 config-overrides.js 文件

const { override } = require('customize-cra')
const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()
const customWebpackConfig = (config) => smp.wrap(config)

module.exports = override(customWebpackConfig)

vue-cli 4.x

修改 vue.config.js 文件

const SpeedMeasurePlugin = require('speed-measure-webpack-plugin')
const smp = new SpeedMeasurePlugin()

// 方案一
module.exports = {
  configureWebpack: (config) => {
    // 其他配置
    smp.wrap(config)
  }
}

// 方案二
module.exports = {
  configureWebpack: smp.wrap({})
}

打包体积分析 webpack-bundle-analyzer

yarn add -D webpack-bundle-analyzer
# OR
npm install -D webpack-bundle-analyzer

webpack-bundle-analyzer | GitHub

create-react-app

react-app-rewired + customize-cra 方案

修改 config-overrides.js 文件

const { override, addBundleVisualizer } = require('customize-cra')

module.exports = override(addBundleVisualizer)

create-react-app 官方推荐使用 source-map-explorer

vue-cli 4.x

修改 vue.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
  chainWebpack(config) {
    config.plugin('webpack-bundle-analyzer').use(BundleAnalyzerPlugin)
  }
}