Skip to content

Resolve Webpack warnings #6523

@tramuntanal

Description

@tramuntanal

Describe the bug
When building JS bundles webpack complaints about vulnerabilities and web performance issues.
The only critical vulnerability is about the development dependency handlebars which is a dependency of jest a JS testing framework.

Upgrading via npm update and npm audit fix automatically updates a lot of packages but increases the number of vulnerabilities, although the result is better because the bulk of them are now low severity and even the critical vulnerability is removed. The problem is that we're getting many TypeScript errors in our code and in dependant libraries. This task requires some dedication to set everything tested and up to date.

To Reproduce
Steps to reproduce the behavior:

  1. Go to the console and execute 'bin/rails webpack'
  2. See output

Expected behavior
As a Decidim user I want to have no vulnerabilities and performance problems also related to Javascript.

Screenshots
If applicable, add screenshots to help explain your problem.
N/A

Stacktrace
If applicable, add the error stacktrace to help explain your problem.

found 3982 vulnerabilities (1715 low, 77 moderate, 2189 high, 1 critical)
  run `npm audit fix` to fix them, or `npm audit` for details

> decidim@0.23.0-dev build:prod /home/oliver/prog/decidim/decidim
> NODE_ENV=production webpack -p --env.prod

Build completed in 13.04s

Webpack Bundle Analyzer saved report to /home/oliver/prog/decidim/decidim/webpack.report.html
Hash: fb01bed91e63e3e84c5b
Version: webpack 4.6.0
Time: 13045ms
Built at: 2020-09-15 17:24:08
                                                                 Asset      Size  Chunks                    Chunk Names
    decidim-comments/app/assets/javascripts/decidim/comments/bundle.js   911 KiB       0  [emitted]  [big]  comments
        decidim-admin/app/assets/stylesheets/decidim/admin/bundle.scss  7.85 KiB       1  [emitted]         admin
          decidim-admin/app/assets/javascripts/decidim/admin/bundle.js   166 KiB       1  [emitted]         admin
            decidim-core/app/assets/javascripts/decidim/core/bundle.js  82.5 KiB       2  [emitted]         core
decidim-comments/app/assets/javascripts/decidim/comments/bundle.js.map  2.42 MiB       0  [emitted]         comments
      decidim-admin/app/assets/javascripts/decidim/admin/bundle.js.map   477 KiB       1  [emitted]         admin
        decidim-core/app/assets/javascripts/decidim/core/bundle.js.map   377 KiB       2  [emitted]         core
 [24] (webpack)/buildin/global.js 489 bytes {0} {1} {2} [built]
 [63] ./decidim-comments/app/frontend/queries/comments.query.graphql 8.18 KiB {0} [built]
 [78] ./decidim-comments/app/frontend/application/icon.component.tsx 1.21 KiB {0} [built]
[183] ./decidim-comments/app/frontend/comments/add_comment_form.component.tsx 18.5 KiB {0} [built]
[351] ./decidim-comments/config/locales sync ^\.\/.*\.yml$ 963 bytes {0} [built]
[352] ./decidim-comments/config/locales sync \.yml$ 963 bytes {0} [built]
[353] ./decidim-comments/app/frontend/support/require_all.ts 403 bytes {0} [built]
[354] ./decidim-comments/app/frontend/support/load_translations.ts 1.59 KiB {0} [built]
[360] ./decidim-comments/app/frontend/comments/comment_thread.component.tsx 2.58 KiB {0} [built]
[361] ./decidim-comments/app/frontend/comments/comment_order_selector.component.tsx 3.55 KiB {0} [built]
[385] ./decidim-comments/app/frontend/application/application.component.tsx 1.45 KiB {0} [built]
[388] ./decidim-comments/app/frontend/comments/comments.component.tsx 10.3 KiB {0} [built]
[389] ./decidim-comments/app/frontend/entry.ts 1.3 KiB {0} [built]
[413] ./decidim-admin/app/frontend/entry.ts 881 bytes {1} [built]
[580] ./decidim-core/app/frontend/entry.ts 105 bytes {2} [built]
    + 566 hidden modules

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets: 
  decidim-comments/app/assets/javascripts/decidim/comments/bundle.js (911 KiB)

WARNING in entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
Entrypoints:
  comments (911 KiB)
      decidim-comments/app/assets/javascripts/decidim/comments/bundle.js


WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/
Child mini-css-extract-plugin node_modules/css-loader/dist/cjs.js!node_modules/sass-loader/lib/loader.js!node_modules/react-select/scss/default.scss:
       2 modules

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions