Slow Small Webpack 2 Build - Tree Shaking - Sass - Chunking -
i've put basic webpack 2 build, seems slow project size. 3 things wanted have were:
- chunking (js & scss)
- scss compiling
- tree shaking
webpack seemed choice being able these things. i've been using gulp , rollup, scss/chunking along side of tree shaking nice thing.
it takes around 4000 - 5000ms compile build, wouldn't end of world except project small, i'm worried becoming larger project grows.
i've tried couple things improve speed.
resolve : { root: path.resolve(__dirname,'src') }
this did help, reducing time couple hundred ms, great. tried take further resolving alias, didn't show gains far tell.
i set devtool eval well. beyond haven't been able improve things, i'm sure it's in way i've set things up. it's worth noting while 'webpack' compiles build, running webpack-dev-server doesn't. it's starts up, hangs on compile , crashes. may or may not separate issue, thought worth including.
i'm using es6 system.import chunking (just note).
i put project on git, feel free pull down: https://github.com/loriensleafs/trying-out-webpack2
the webpack.config.js is:
var path = require('path'), webpack = require('webpack'), cleanplugin = require('clean-webpack-plugin'), extracttextplugin = require('extract-text-webpack-plugin'), production = process.env.node_env === 'production'; var plugins = [ new extracttextplugin({ filename: 'bundle.css', allchunks: true}), new webpack.optimize.commonschunkplugin({ name : 'vendor', children : true, minchunks : 2 }) ]; if (production) { plugins = plugins.concat([ new cleanplugin('builds'), new webpack.optimize.dedupeplugin(), new webpack.optimize.occurenceorderplugin(), new webpack.optimize.minchunksizeplugin({ minchunksize: 51200, // ~50kb }), new webpack.optimize.uglifyjsplugin({ mangle: true, compress: { warnings: false, // suppress uglification warnings }, }), new webpack.defineplugin({ __server__ : !production, __development__ : !production, __devtools__ : !production, 'process.env': { babel_env: json.stringify(process.env.node_env), } }) ]); } module.exports = { // debug : !production, devtool : production ? false : 'eval', entry : './src', output : { path : 'builds', filename : 'bundle.js', chunkfilename : 'chunk.js', publicpath : 'builds/' }, resolve : { root: path.resolve(__dirname,'src') }, plugins : plugins, module : { loaders: [ { test : /\.(png|gif|jpe?g|svg)$/i, loader : 'url', query : { limit: 10000 } }, { test : /\.js$/, include : /src/, exclude : /node_modules/, loader : 'babel' }, { test : /\.scss$/, include : /src/, exclude : /node_modules/, loader : extracttextplugin.extract(['css','sass']) }, { test : /\.html$/, loader : 'html' } ] } };
thanks advice/help folks have on this. if there's other helpful info can post on here please let me know.
Comments
Post a Comment