Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Vue-cli: size-limit error on build #64

Closed
rof20004 opened this issue May 16, 2018 · 26 comments
Closed

Vue-cli: size-limit error on build #64

rof20004 opened this issue May 16, 2018 · 26 comments

Comments

@rof20004
Copy link

I am using vue-cli to generate the project front-end.

In my scripts to create production bundle I need to execute: yarn build.

This works and my dist folder has 9.7 Mega of size, I tried to use the size-limit but not works, show me this error:

Size Limit can't resolve
        ./App

I am working using Vue components (.vue files).
@ai
Copy link
Owner

ai commented May 17, 2018

Show your Size Limit config.

@rof20004
Copy link
Author

You are right, sorry, I will post my entire package.json today, now I am busy. Thanks for contact.

@ai
Copy link
Owner

ai commented May 17, 2018

I don't know the whole story, but seems like you need pack the bundle with your own bundler and then set webpack: false to Size Limit to analyze bundle size without Size Limit’s webpack.

Or you can change the config in Size Limit’s webpack by config option.

@rof20004
Copy link
Author

Here is the proccess:

yarn build to generate the folder dist, for production use, this is the contents:

dist
-> static
* css
* img
* js
a) app.2bfb4a074f9c26036815.js 224k
b) app.2bfb4a074f9c26036815.js.map 1,2M
c) manifest.02852648766036734d1d.js 1,5k
d) manifest.02852648766036734d1d.js.map 14k
e) vendor.5cdde3773ae3cbb861de.js 667k
f) vendor.5cdde3773ae3cbb861de.js.map 4,1M
* webfonts
-> .htaccess
-> index.html
-> service-worker.js

This is my package.json:

{
  "name": "my-little-ponney",
  "version": "1.0.0",
  "description": "Entire Personal Project",
  "author": "me",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=desenvolvimento node build/dev-server.js",
    "start": "node build/dev-server.js",
    "build": "cross-env NODE_ENV=production node build/build.js",
    "build-dev": "cross-env NODE_ENV=desenvolvimento node build/build.js",
    "build-hom": "cross-env NODE_ENV=homologacao node build/build.js",
    "unit": "cross-env BABEL_ENV=test karma start test/unit/karma.conf.js --single-run",
    "e2e": "node test/e2e/runner.js",
    "test": "npm run unit && npm run e2e",
    "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
    "size": "yarn build && size-limit"
  },
  "dependencies": {
    "@bootstrapstudio/bootstrap-better-nav": "^1.3.2",
    "await-to-js": "^2.0.1",
    "axios": "^0.17.1",
    "bootstrap": "^4.0.0",
    "bootstrap-hover-dropdown": "^2.2.1",
    "jquery": "^3.3.1",
    "moment": "^2.20.1",
    "popper.js": "^1.12.9",
    "vue": "^2.5.2",
    "vue-axios": "^2.0.2",
    "vue-mq": "^0.2.1",
    "vue-router": "^3.0.1",
    "vue-toasted": "^1.1.24",
    "vuejs-datepicker": "^0.9.26",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.5",
    "babel-core": "^6.26.0",
    "babel-eslint": "^8.0.1",
    "babel-loader": "^7.1.2",
    "babel-plugin-istanbul": "^4.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-2": "^6.24.1",
    "babel-register": "^6.26.0",
    "chai": "^4.1.2",
    "chalk": "^2.1.0",
    "chromedriver": "^2.33.1",
    "connect-history-api-fallback": "^1.4.0",
    "copy-webpack-plugin": "^4.1.1",
    "cross-env": "^5.0.5",
    "cross-spawn": "^5.1.0",
    "css-loader": "^0.28.7",
    "cssnano": "^3.10.0",
    "eslint": "^4.9.0",
    "eslint-config-standard": "^10.2.1",
    "eslint-friendly-formatter": "^3.0.0",
    "eslint-loader": "^1.9.0",
    "eslint-plugin-html": "^3.2.2",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-node": "^5.2.0",
    "eslint-plugin-promise": "^3.6.0",
    "eslint-plugin-standard": "^3.0.1",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.16.2",
    "extract-text-webpack-plugin": "^3.0.0",
    "file-loader": "^1.1.5",
    "friendly-errors-webpack-plugin": "^1.6.1",
    "html-webpack-plugin": "^2.30.1",
    "http-proxy-middleware": "^0.17.4",
    "inject-loader": "^3.0.1",
    "jest": "^22.4.2",
    "karma": "^1.7.1",
    "karma-coverage": "^1.1.1",
    "karma-mocha": "^1.3.0",
    "karma-phantomjs-launcher": "^1.0.4",
    "karma-phantomjs-shim": "^1.5.0",
    "karma-sinon-chai": "^1.3.2",
    "karma-sourcemap-loader": "^0.3.7",
    "karma-spec-reporter": "0.0.31",
    "karma-webpack": "^2.0.5",
    "mocha": "^4.0.1",
    "nightwatch": "^0.9.16",
    "node-sass": "^4.7.2",
    "opn": "^5.1.0",
    "optimize-css-assets-webpack-plugin": "^3.2.0",
    "ora": "^1.3.0",
    "phantomjs-prebuilt": "^2.1.15",
    "rimraf": "^2.6.2",
    "sass-loader": "^6.0.6",
    "selenium-server": "^3.6.0",
    "semver": "^5.4.1",
    "shelljs": "^0.7.8",
    "sinon": "^4.0.1",
    "sinon-chai": "^2.14.0",
    "size-limit": "^0.18.0",
    "ssh-webpack-plugin": "^0.1.7",
    "sw-precache-webpack-plugin": "^0.11.4",
    "uglify-es": "^3.1.3",
    "url-loader": "^0.6.2",
    "vue-loader": "^13.3.0",
    "vue-style-loader": "^3.0.3",
    "vue-template-compiler": "^2.5.2",
    "webpack": "^3.7.1",
    "webpack-bundle-analyzer": "^2.9.0",
    "webpack-dev-middleware": "^1.12.0",
    "webpack-hot-middleware": "^2.19.1",
    "webpack-merge": "^4.1.0"
  },
  "engines": {
    "node": ">= 4.0.0",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "size-limit": {
    "path": "./src/main.js",
    "webpack": false
  }
}

@ai
Copy link
Owner

ai commented May 17, 2018

OK. You need to size-limit.path to your build bundle, not source files

@rof20004
Copy link
Author

You mean the build.js or the contents inside dist folder?

@ai
Copy link
Owner

ai commented May 17, 2018

Contents inside dist folder

@rof20004
Copy link
Author

I changed to this:

"size-limit": [
    {
      "path": "./dist",
      "webpack": false
    }
  ]

I got this message:

Package size: 3.11 MB
With all dependencies, minified and gzipped

But I can not see the generated files, the size still the same

$ du -sh dist/
9,7M	dist/

@ai
Copy link
Owner

ai commented May 17, 2018

Show your dist/ content. (Maybe you need to add something to path.

@ai
Copy link
Owner

ai commented May 17, 2018

BTw, by writing only path: "dist/" you are asking Size Limit to check only dist/index.js. If you want to check every files inside dist/, set path: "dist/*"

@rof20004
Copy link
Author

Ok, I will try with dist/*

@rof20004
Copy link
Author

Well, remains the same size.

Size-limit output:

Package size: 2.69 KB
With all dependencies, minified and gzipped

My dist folder:

$ du -sh dist/
9,7M	dist/

@ai
Copy link
Owner

ai commented May 17, 2018

Show your dist/ content.

@rof20004
Copy link
Author

Here:

dist
    -> static (folder)
                * css (folder)
                * img (I have some images here) (folder)
                * js (folder)
                     a) app.2bfb4a074f9c26036815.js 224k
                     b) app.2bfb4a074f9c26036815.js.map 1,2M
                     c) manifest.02852648766036734d1d.js 1,5k
                     d) manifest.02852648766036734d1d.js.map 14k
                     e) vendor.5cdde3773ae3cbb861de.js 667k
                     f) vendor.5cdde3773ae3cbb861de.js.map 4,1M
                * webfonts (some fonts here) (folder)
  -> .htaccess (file)
  -> index.html (file)
  -> service-worker.js (file)

@ai
Copy link
Owner

ai commented May 17, 2018 

      "path": "dist/**/*.{js,css,svg,png,jpg}"

@rof20004
Copy link
Author

The same result, the dist folder is 9,7M.

Size-limit output:
Package size: 1.13 MB
With all dependencies, minified and gzipped

This size-limit works only to js files? Can I test with only one file without webpack?

@ai
Copy link
Owner

ai commented May 17, 2018

Check the size of .map files. hey will not be loaded to clients, so you don’t need to check their size.

Size Limit with webpack: false can work with any files :).

@rof20004
Copy link
Author

Well, the map files are bigger, but the size not changed when I do size-limit with only one file too. Maybe my project configuration not works with size-limit.

@ai
Copy link
Owner

ai commented May 17, 2018

What is a size or your *.js, *.css and images? (check it manually)

Maybe my project configuration not works with size-limit.

It works, you just need to set correct path to dist according the files important for you.

@rof20004
Copy link
Author

rof20004 commented May 17, 2018 •
edited
Loading

I tried point to only one file:

"size-limit": [
    {
      "path": "dist/static/js/vendor.5cdde3773ae3cbb861de.js",
      "webpack": false
    }
  ]

And the size not changed.

This file has the original size of 677k, using size-limit the size not changed.

@rof20004
Copy link
Author

Is important to see that this vendor is minified and uglyfied, maybe this is the problem?

@ai
Copy link
Owner

ai commented May 17, 2018

Hm, maybe we have a issue here :-/

I will check it this weekend.

As temporary solution you can write a list of files in array:

"size-limit": [
    {
      "path": [
        "dist/static/js/vendor.*.js"
        "dist/static/js/app.*.js"
      ]
      "webpack": false
    }
  ]

@rof20004
Copy link
Author

Ok @ai Thanks for attention, I will waiting for your time.

@rof20004
Copy link
Author

rof20004 commented May 17, 2018 •
edited
Loading

Other important information is that, when I tried to use size-limit to .map files, an error is raised.

@rof20004
Copy link
Author

Good day, see you later :)

@ai
Copy link
Owner

ai commented May 17, 2018

@rof20004 also, Size Limit gzip the files (since your client will receive files gzipped).

You can add gzip: false to check files without gzipped. But I recommend to keep it.

@ai ai closed this as completed Aug 11, 2019
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@ai @rof20004