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:

  1. chunking (js & scss)
  2. scss compiling
  3. 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

Popular posts from this blog

java - Jasper subreport showing only one entry from the JSON data source when embedded in the Title band -

serialization - Convert Any type in scala to Array[Byte] and back -

SonarQube Plugin for Jenkins does not find SonarQube Scanner executable -