nuxt-community / webpackmonitor-module Goto Github PK

View Code? Open in Web Editor NEW

83.0 4.0 5.0 87 KB

Monitor nuxt webpack optimization metrics through the development process using webpackmonitor

License: MIT License

JavaScript 96.46% Vue 3.54%

webpackmonitor-module's Introduction

Webpack Monitor Module

Please note that Webpack Monitor is NOT currently maintained - sorry 😢

Monitor Nuxt webpack optimization metrics through the development process using webpackmonitor

📖 Release Notes

Setup

Add @nuxtjs/webpackmonitor dependency using yarn or npm to your project
Add @nuxtjs/webpackmonitor to modules section of nuxt.config.js

{
  modules: [
    '@nuxtjs/webpackmonitor',
 ],
}

Optionally add .monitor to .gitignore file if you don't want to track reports with VCS.

Usage

This module automatically captures stats from each Production build into .monitor/stats.json file if there was any diff.

You can use npx nuxt build --webpackmonitor or yarn nuxt build --webpackmonitor to launch monitor dashboard in your browser after build.

Options

To customize defaults you can add webpackMonitor key to nuxt.config.js. See here for possible options.

License

MIT License

webpackmonitor-module's People

Contributors

Stargazers

Watchers

Forkers

cuulee whjvenyl david-mueller cmty-bot-dev ms-kalis

webpackmonitor-module's Issues

Webpack monitor stops running during build

When I run npm run build --webpackmonitor, Webpack monitor exits before I can view the site. Terminal output is:

nuxt build --webpackmonitor

  nuxt:build Building... +0ms
  nuxt:pwa Adding icons +0ms
  nuxt:pwa Adding manifest +0ms
  nuxt:pwa Adding meta +0ms
  nuxt: Call build:before hooks (1) +0ms
  nuxt:pwa Adding workbox +0ms
  nuxt:build App root: /home/scott/Sites/scott +0ms
  nuxt:build Generating /home/scott/Sites/scott/.nuxt files... +0ms
  nuxt:build Generating files... +6ms
  nuxt:build Generating routes... +11ms
  nuxt:build Building files... +46ms
  ████████████████████ 100% 

Build completed in 6.82s

 WARNING  Compiled with 1 warnings                                                                                                                    21:51:51

 warning  

asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets: 
  icons/icon_512.f00x800w000.png (357 kB)

Hash: 7c3338a414a22426a423
Version: webpack 3.11.0
Time: 6822ms
                                    Asset       Size  Chunks                    Chunk Names
            icons/icon_64.f00x800w000.png    9.46 kB          [emitted]         
 pages/post/_slug.acaeb6f9a733d3a3f218.js    3.05 kB       0  [emitted]         pages/post/_slug
pages/_slug/index.f4f0b94e75caa9c5bef8.js  848 bytes       2  [emitted]         pages/_slug/index
  layouts/default.a6a6d886801607879689.js  658 bytes       3  [emitted]         layouts/default
           vendor.6a7a034393f3916b321c.js     153 kB       4  [emitted]         vendor
              app.49edf950603dc4f7fa02.js    31.4 kB       5  [emitted]         app
         manifest.7c3338a414a22426a423.js    1.56 kB       6  [emitted]         manifest
                                 LICENSES  645 bytes          [emitted]         
      pages/index.c5d85e42449b7910f7f8.js    3.19 kB       1  [emitted]         pages/index
           icons/icon_120.f00x800w000.png      29 kB          [emitted]         
           icons/icon_144.f00x800w000.png      40 kB          [emitted]         
           icons/icon_152.f00x800w000.png    43.6 kB          [emitted]         
           icons/icon_192.f00x800w000.png    65.1 kB          [emitted]         
           icons/icon_384.f00x800w000.png     216 kB          [emitted]         
           icons/icon_512.f00x800w000.png     357 kB          [emitted]  [big]  
                   manifest.9024bed0.json  900 bytes          [emitted]         
 + 2 hidden assets

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (300 kB).
This can impact web performance.
Assets: 
  icons/icon_512.f00x800w000.png (357 kB)
  nuxt: Call build:done hooks (2) +7s

Webpack-Monitor is running on port 8085!
Press ctrl C to exit
  nuxt: Call generate:distRemoved hooks (1) +31ms
  nuxt:build Destination folder cleaned +8s
  nuxt: Call generate:distCopied hooks (1) +71ms
  nuxt:build Static & build files copied +70ms
  nuxt:render Rendering url / +0ms
  nuxt: Call generate:page hooks (1) +11ms
  nuxt:build Generate file: /index.html +11ms
  nuxt:render Rendering url / +11ms
  nuxt: Call generate:done hooks (1) +6ms
  nuxt:build HTML Files generated in 8.4s +7ms

It looks like it spawns and exits part way through the build.

_{This question is available on Nuxt.js community (#c1)}

Using this module in a nuxt build gives a deprecation error

Version

0.1.0

Reproduction link

https://codesandbox.io/s/vn52njnjql?fontsize=14

Steps to reproduce

Run the build script yarn build and see the deprecation error.

What is expected ?

That the error does not appear.

What is actually happening?

A deprecation error is being thrown in the build.

Additional comments?

ERROR (node:4816) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

_{This bug report is available on Nuxt community (#c5)}

Cannot find module "./../monitor/stats.json"

Hi @pi0 , when I try this module, there is a exception app.js:28 Uncaught Error: Cannot find module "./../monitor/stats.json"

I think the frontend will get data through getstats and no need to load file, the error confused me. Did I miss anything or it is a error at bundle app.js building?

_{This question is available on Nuxt.js community (#c3)}

Using this module in a nuxt build gives a deprecation error

Running npx nuxt build with or without --webpackmonitor while this module is installed produces this error:

(node:4755) DeprecationWarning: Tapable.plugin is deprecated. Use new API on .hooks instead

Thank you for the awesome analyzer though!

_{This question is available on Nuxt community (#c4)}

Customizing webpackMonitor in nuxt.config.js has no effect

framework template: nuxt-express

example: nuxt.config.js:

// nuxt.config.js
module.exports = {
...
  webpackMonitor : {
    capture: true, // -> default 'true'
    target: '~/.monitor/stats.json', // default -> '../monitor/stats.json'
    launch: true, // -> default 'false'
    port: 4444, // default -> 8081
    excludeSourceMaps: true // default 'true'
  },
...
}

npx nuxt build --webpackmonitor

then the port was still 8085, and the server of webpack monitor closed automatically itself.

Webpack-Monitor is running on port 8085!
Press ctrl C to exit
Hash: 6b4274d164104b282cf9
Version: webpack 3.10.0
Time: 14708ms
             Asset     Size  Chunks             Chunk Names
server-bundle.json  1.74 MB          [emitted]
  nuxt:build Building done +1m

_{This question is available on Nuxt.js community (#c2)}