yarn lint changes .min.js files

[stuta]

I make uglified .min.js versions of some of my libraries.

It might be good idea to add "*.min.js" to .eslintignore and .prettierignore or "yarn lint" will un-uglify .min.js files.

[chrisvfritz]

Thanks for bringing this up. 🙂 As a best practice, the source for dependencies should generally be under node_modules instead of being included in the source of the project. Could you share more about the context where keeping .min.js files in the source was necessary?

[stuta]

I can't publish copyrighted modules as node packages so they are in src/utils -folder now.

At least in webpack 3 the final size was much smaller when importing .min.js versions than normal versions even if webpack was doing minify. In my last project the size difference was about 30%. There are discussions about this somewhere in web but I could not find those threads now.

Best option would be if we could configure webpack to use .min.js -files in final build if they are already available somewhere.

---

I hope we can get webpack-bundle-analyzer in boilerplate to work with development and dist -versions. I was able to get it to work (somehow) with vue cli using this in package.json:

"stats": "node node_modules/webpack/bin/webpack.js --config node_modules/@vue/cli-service/webpack.config.js --profile --json | sed -e '1,3d' > stats.json && webpack-bundle-analyzer stats.json build"

[chrisvfritz]

Thanks for explaining. 🙂 The boilerplate is using Webpack 4, so you probably shouldn't encounter that same issue. The package being private also shouldn't be a problem, as you can either:

• Publish your package to NPM as a private package, or
• Reference the private Git URL (e.g. on GitHub, Gitlab, etc) in package.json instead of the version number.

Regarding webpack-bundle-analyzer, that sounds like a separate issue. You should see a report.html file when you run yarn build:ci. Is that not working for you?

[stuta]

I have not set up ci so I didn't try that, report.html looks very good. I am a backend developer just starting frontend stuff. I have to read all the docs now :no_mouth:.

I'll try later how using .min.js affects the final build size.

[chrisvfritz]

Sounds great. 🙂 I'd love to hear what you discover.

[stuta]

Interesting, vue.runtime.min.js is 61kb, vue.runtime.esm.js is 212kb.

I created new project with vue-cli rc3. File report.html shows parsed size 60.73 kb and report.json in https://chrisbateman.github.io/webpack-visualizer I can see that vue.runtime.esm.js is 66kb actual.

But when I create build in boilerplate then report.html shows same parsed size 60.73 but report.json in webpack-visualizer shows 31kb actual.

Any ideas why?

[stuta]

I think this may have something to do with babel settings. I wanted to have native ES6 without any polyfills, but I have been unable to find browserslist setting that does not add core-js to the build.

[chrisvfritz]

To disable polyfills with Vue CLI 3, you'll probably want something like this:

presets: [
  [
    '@vue/app',
    {
      // Disable Babel's polyfills, replaced by the
      // polyfill.io service in index.html
      useBuiltIns: false,
    },
  ],
],

in .babelrc.js.

What we do in the latest version of the boilerplate though, is make use of Vue CLI's new --modern mode, so that you get one build for modern browsers and one for legacy browsers (e.g. IE). This allows much smaller file sizes and even faster performance for modern browsers.

[stuta]

Thanks, I was able to find reason why in my project core-js was imported.

I'm still puzzled why boilerplate has vue.runtime.esm.js size 31kb actual and in vue-cli it's size is 66kb actual. I'm using modern build and useBuiltIns: false.

[chrisvfritz]

Maybe one is gzipped and the other is just minified?

[chrisvfritz]

I don't think there's anything more to do here, so closing for now. 🙂