Created
July 17, 2016 10:30
-
-
Save sivabudh/6da7221748d58358fd094b4ec0a3c033 to your computer and use it in GitHub Desktop.
Our 2 Webpack config files which we use to 1) Compile TypeScript files 2) Compile SASS files 3) ...and bundle them all up in a single `build.js` file
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// webpack.dev.js | |
// | |
var loaders = require('./webpack.loaders'); | |
var failPlugin = require('webpack-fail-plugin'); | |
module.exports = { | |
entry: [ | |
'./static/typescripts/index.ts', | |
], | |
output: { | |
filename: 'build.js', | |
path: 'static/dist', | |
}, | |
plugins: [failPlugin], | |
resolve: { | |
root: __dirname, | |
extensions: ['', '.ts', '.js', '.json'], | |
}, | |
resolveLoader: { | |
modulesDirectories: ['node_modules'] | |
}, | |
devtool: 'source-map', | |
module: { | |
loaders: loaders | |
}, | |
}; | |
// | |
// webpack.loaders.js | |
// | |
module.exports = [{ | |
test: /\.tsx?$/, | |
loader: 'ng-annotate!awesome-typescript' | |
}, { | |
test: /\.jsx?$/, | |
loader: 'ng-annotate', | |
exclude: ['/node_modules/'] | |
}, { | |
test: /\.html$/, | |
loader: 'html' | |
}, { | |
test: /\.css$/, | |
loader: 'style!css' | |
}, { | |
test: /\.scss$/, | |
loader: 'style!css!sass' | |
}, { | |
test: /\.png$/, | |
loader: "url?limit=10000" | |
}, { | |
test: /\.(jpg|ttf|eot|woff2?|svg)$/, | |
loader: "file" | |
}, ]; |
So a few things I spot that I think could really help:
- I noticed you are using full lodash and moment libraries. Lodash however has a webpack version of their libraries split up so that you only have to
npm install
the functions you use. Moment, I'm not sure if you can get a lighter version, however look into thenoParse
property. It speeds up performance by ignoring already built libs. May be useful to apply to angular and moment which can't really be broken apart. - Production builds are always going to be slower because of optimizations, but I would take a look at the
-p
flag and what it means in the webpack source. A lot of times personally I will roll without it and customize my sourcemap types manually. - The kind of sourcemaps you are generating right now are the slowest but most accurate kind. Maybe look into a
cheap-eval-source-map
for local development as well which will speed things up. - Since you use so many libs, take a look at the DllPlugin (and DllReferencePlugin). It allows you to create a
vendor DLL bundle
which is done in a separate build step (you would only have to build it once unless you change your vendors). Since this DLL bundle is pre-built, when you run your app build, all the time it would take to bundle and trace your vendor dependencies would be already taken care of. (I've heard this can drop build times by 70%).
@TheLarkInn Thank you so much. I will run some benchmarks and let you know the improvement after these changes 👍
Early results:
Baseline: webpack --config webpack/webpack.dev.js -p
real 0m40.175s
Without -p: webpack --config webpack/webpack.dev.js
real 0m12.080s
CheapEvalSourceMap: webpack --config webpack/webpack.dev.js
real 0m9.467s
Since we're not using -p in development anyway, only the 2nd one really counts. Still a ~20% speed-up for almost zero effort.
Am now looking into DLLPlugin. FWIW, the docs and "example" on this are pretty spartan, is there a good writeup/blog post that explains this more for a beginner?
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
For what it's worth, this is our
package.json
.