search

jcoreio / crater

Meteor/Webpack/React SSR app skeleton that runs your app code outside of Meteor Isobuild
ISC License
82 stars 10 forks source link

Tree Shaking #65

Open evelant opened 7 years ago

evelant commented 7 years ago

Is it possible to use tree shaking with webpack2 in this skeleton?

On the webpack2 branch I changed my .babelrc to the following

{
  "presets": [ ["es2015", { "loose": true, "modules": false}], "stage-1", "react", "flow"],
  "plugins": [
    "transform-runtime",
    "meteor-imports"
  ]
}

Which as I understand it causes babel to no longer process imports because we want webpack to do it. This breaks the start script however. Changing the package.json scripts entry to

"start": "babel-node --presets es2015,flow scripts/start.js",

Allows the webpack build to start, but running the server fails with 

[smart-restart] error given was: SyntaxError: Unexpected reserved word

I am not really familiar with how smart-restart works. Is it possible to build with modules: false in babel to have webpack2 do tree shaking? This could massively reduce the bundle size on a lot of applications if it can be made to work.

jedwards1211 commented 7 years ago

This is a very important question, and one I wish I had looked into sooner. I don't think I'll be able to look into this in the next few days, but I'm pretty sure the unexpected reserved word is import because "modules": false prevents babel from transpiling import statements that get run on the server side.

So it sounds like we may have to have to keep the current config on the server, but use the config you mentioned in webpack (by adding it as a query to the "happy" loader, since it's wrapping babel-loader).

Do you have a link to somewhere that says you have to use "modules": false? I'm kind of surprised about that, I thought webpack 2 still supports require statements even though it also supports import statements natively.

jedwards1211 commented 7 years ago

Actually I started looking into this already. The code on the webpack2 branch now uses {loose: true, modules: false} in the webpack configs, so theoretically it should work, though I haven't actually verified that it does tree shaking.