Webpack 2 configuration for shaking trees and lazy loading using the System.import on React project

Question

I am new to webpack 2 and lazy loading, so far I have created a project without lazy loading and code separation, but now I want to break my code into pieces and use the system import with React Router. I created the React Router part according to this article.

this webpack 2 configuration file is below.

let webpack = require('webpack'); let path = require('path'); let ExtractTextPlugin = require('extract-text-webpack-plugin'); var devFlagPlugin = new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.DEBUG || 'false')), 'process.env': { NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'development'), } }); let extractSCSS = new ExtractTextPlugin('[name].css') module.exports = { context: __dirname, entry: { bundle: './src/app/app-client.jsx', styles: './src/app/sass/main.scss', vendor: [ 'react', 'react-dom' ] }, output: { filename: '[name].js', chunkFilename: 'chunk.[id].[chunkhash:8].js', path: './src/build', }, resolve: { extensions: ['.js', '.jsx'] }, devtool: 'cheap-module-source-map', module : { rules : [ { test: /\.scss$/, loader: extractSCSS.extract(['css-loader','sass-loader']) }, { test: /\.jsx?$/, exclude: [/node_modules/, /libs/], use: { loader: "babel-loader", query: { presets: ['es2015', 'react', 'stage-2' ], plugins: [ "transform-runtime" ] } } }, { test: /\.woff2?$|\.ttf$|\.eot$|\.svg$|\.png|\.jpe?g|\.gif$/, use: { loader:'file-loader' } } ] }, plugins: [ extractSCSS, devFlagPlugin, new webpack.optimize.CommonsChunkPlugin({ name: 'bundle', children: true, async: true, minChunks: 2 }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendor', children: true, async: true, minChunks: 2 }) ] } 

but webpack only creates two files, a provider and a package, and the package size has not decreased after I separated React and React DOM.

These are my routes.

 import App from './App.jsx'; function errorLoading(err) { console.error('Dynamic page loading failed', err); } function loadRoute(cb) { return (module) => cb(null, module.default); } export default { component: App, childRoutes: [ { path: 'stock/info/:symbol(/:tab)', getComponent(location, cb) { System.import('./StockPage') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '*', getComponent(location, cb) { System.import('./NoMatch') .then(loadRoute(cb)) .catch(errorLoading); } } ] }; 

my application starts, but lazy loading will not work, of course, because I do not have pieces of my modules inside System.import .

Please help me create the correct webpack configuration to run my application! Thanks in advance and sorry if something is absurd since I am new to webpack.

Answer 1

Webpack2 switched from System.import () to import () to match the current javascript function being offered. Now at stage 3.

So you should be able to reconfigure webpack to enable STAGE-3

 { test: /\.jsx?$/, exclude: [/node_modules/, /libs/], use: { loader: "babel-loader", query: { presets: ['es2015', 'react', 'stage-2', 'stage-3' ], plugins: [ "transform-runtime" ] } } }, 

Or the dynamic-import plugin

 { test: /\.jsx?$/, exclude: [/node_modules/, /libs/], use: { loader: "babel-loader", query: { presets: ['es2015', 'react', 'stage-2' ], plugins: [ "transform-runtime", "syntax-dynamic-import"] } } }, 

Then change the routes

 export default { component: App, childRoutes: [ { path: 'stock/info/:symbol(/:tab)', getComponent(location, cb) { import('./StockPage') .then(loadRoute(cb)) .catch(errorLoading); } }, { path: '*', getComponent(location, cb) { import('./NoMatch') .then(loadRoute(cb)) .catch(errorLoading); } } ] }; 

See the webpack2 help page here for a complete document on using imports to separate code and lazy downloads. https://webpack.js.org/guides/migrating/#code-splitting-with-es2015 https://github.com/tc39/proposal-dynamic-import

To enable Webpack2 tree shake, only one change is required to configure your Babel.

 presets: ['es2015', 'react', 'stage-2' ], 

becomes

 presets: [['es2015', { modules: false }], 'react', 'stage-2' ], 

This is an article that I learned about treeshaking from: https://medium.freecodecamp.com/tree-shaking-es6-modules-in-webpack-2-1add6672f31b#.lv3ldgfhs