Быстрый старт с плагином webpack-bundle-analyzer

Webpack

предисловие

Прежде всего, это плагин для веб-пакетов, который необходимо использовать с веб-пакетом и веб-пакетом-cli. Функция этого плагина заключается в создании отчетов об анализе кода, чтобы помочь улучшить качество кода и производительность веб-сайта.

Установить

# NPM 
npm install --save-dev webpack-bundle-analyzer
# Yarn 
yarn add -D webpack-bundle-analyzer

Как использовать один

1. Настройте файл webpack.config.js:

// webpack.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin()  // 使用默认配置
    // 默认配置的具体配置项
    // new BundleAnalyzerPlugin({
    //   analyzerMode: 'server',
    //   analyzerHost: '127.0.0.1',
    //   analyzerPort: '8888',
    //   reportFilename: 'report.html',
    //   defaultSizes: 'parsed',
    //   openAnalyzer: true,
    //   generateStatsFile: false,
    //   statsFilename: 'stats.json',
    //   statsOptions: null,
    //   excludeAssets: null,
    //   logLevel: info
    // })
  ]
}

2. Настройте файл package.json

{
 "scripts": {
    "dev": "webpack --config webpack.dev.js --progress"
  }
}

3. Введите в командной строке инструментnpm run dev, нажмите Ввод.

Откроется браузер, и вы увидите график анализа проекта, который выглядит следующим образом.image.png

преимущество:Простой!
недостаток:Каждый раз, когда вы запускаете команду упаковки, локально создается локальный сервер с номером порта 8888, а результаты анализа проекта автоматически отображаются в браузере. Недостаточно гибкий, вы не хотите видеть анализ кода при каждой сборке!

Используйте метод два

1. Настройте файл webpack.config.js:

// webpack.config.js 文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
module.exports={
  plugins: [
    new BundleAnalyzerPlugin({
      analyzerMode: 'disabled', // 不启动展示打包报告的http服务器
      generateStatsFile: true, // 是否生成stats.json文件
    }),
  ]
}

2. Настройте файл package.json

{
 "scripts": {
    "generateAnalyzFile": "webpack --profile --json > stats.json", // 生成分析文件
    "analyz": "webpack-bundle-analyzer --port 8888 ./dist/stats.json" // 启动展示打包报告的http服务器
  }
}

3. В инструменте командной строки сначала запуститеnpm run generateAnalyzFileкоманду, затем запуститеnpm run analyzЗаказ. Теперь вы можете увидеть результаты анализа.

преимущество:Немного сложно, но гибко!
недостаток:Каждый раз, когда вы запускаете команду,distсоздать каталогstats.jsonдокумент. Этот вопрос может бытьgenerateStatsFileсвойство установлено наfalse, но это не создаетstats.jsonфайл. Решение: если вам нужно просмотреть отчет об анализе, установите для него значениеtrue, в противном случае установитеfalse.

Суммировать

Эта статья представляет собой простую демонстрацию, которая поможет Xiaobai быстро приступить к работе. Дополнительные сведения о настройке этого плагина см. в официальной документации. Если у вас есть какие-либо упущения или вопросы, пожалуйста, не стесняйтесь оставлять комментарии или личные сообщения мне, и я отвечу, когда увижу это.

Ссылка на официальную документацию:Уууу, эта лошадь plus.com/package/Web…

Категории