search

vuejs-templates / webpack

A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction.
MIT License
9.7k stars 4.38k forks source link

Plans for ES2015+ native modules/bundle-splitting? #935

Open mismith opened 7 years ago

mismith commented 7 years ago

As this recently viral article outlines, most modern browsers are now capable of handling ES2015+ syntax natively, meaning the Babel transpilation (and resulting code bloat) is not strictly necessary for many users.

How likely/possible/agreeable would be it be implement <script type="module"> support along with dist/app.min.js + dist/app.es5.min.js bundle splitting?

LinusBorg commented 7 years ago

Those are two different things:

  1. Transpilation
  2. using native ES modules.

Concering 1., you can simply adjust your babel config to only support evergreen browsers, as explained in the article. since that's a very easy step, I don't hink this needs special support in the template.

About 2., there are no plans yet. I'm unaware wether webpack-html-plugin supports such a thing.

Since we recently started discussions about vue-cli 3, I think this would be something we could solve through a preset for v3, but not in this template here.

mismith commented 7 years ago

Yeah, I guess these could be seen as two parts of the same end goal. As you mention, it's currently totally possible to target only the latest browsers, but like the article mentions, the key part is doing both at the same time, much like a progressive enhancement: new browsers use the latest and greatest, old browsers use the transpiled equivalent.

vue-cli 3 sounds exciting, and maybe it is the best place for this kind of functionality to be added. I figured it would have to start at the template level instead of the cli tool level though, since this workflow would likely use webpack, and currently not all templates do.

What can I do next? Should this be discussed further or would it just need to gain popularity as an idea before anything happens?

exarus commented 7 years ago

@mismith the browsers can't resolve such expression: import _ from 'lodash' Because they don't know anything about node_modules and actually non-relative non-URL paths are currently not implemented. So we can import lodash in these ways: import _ from 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js' import _ from './lodash' Both ways are doesn't fit typical npm+webpack workflow.

BTW CSS importing is also not supported by browsers.