Skip to content
This repository has been archived by the owner on Nov 6, 2020. It is now read-only.

Webpack optimisations - Using DLL #2264

Merged
merged 4 commits into from
Sep 23, 2016
Merged

Webpack optimisations - Using DLL #2264

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f0ad074
Using extract CSS in production / build
ngotchac Sep 22, 2016
2b7aa5c
Using Webpack DLL to speed-up rebuilds
ngotchac Sep 22, 2016
d0c27aa
improved build time: <1s for dapps
ngotchac Sep 23, 2016
6bb503e
Removed old Meteor webpack conf
ngotchac Sep 23, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions js/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,15 @@
"Promise"
],
"scripts": {
"build": "npm run buildApp",
"build": "NODE_ENV=production npm run build:dll && npm run buildApp",
"build:dll": "webpack --config vendor.webpack.config.js",
"buildApp": "NODE_ENV=production webpack",
"buildLibrary": "rollup --config ./rollup.library.js",
"clean": "rm -rf ./build",
"coveralls": "npm run testCoverage && coveralls < coverage/lcov.info",
"lint": "eslint --ignore-path .gitignore ./src/",
"release": "./scripts/release.sh",
"start": "npm install && npm run startApp",
"start": "npm install && npm run build:dll && npm run startApp",
"startApp": "webpack-dev-server -d --history-api-fallback --open --hot --inline --progress --colors --port 3000",
"test": "mocha 'src/**/*.spec.js'",
"testCoverage": "istanbul cover _mocha -- 'src/**/*.spec.js'",
Expand Down
1 change: 1 addition & 0 deletions js/src/dapps/gavcoin.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
</head>
<body>
<div id="container"></div>
<script src="/vendor.bundle.js"></script>
<script src="/commons.js"></script>
<script src="/parity.js"></script>
<script src="/gavcoin.js"></script>
Expand Down
1 change: 1 addition & 0 deletions js/src/dapps/registry.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
</head>
<body>
<div id="container"></div>
<script src="/vendor.bundle.js"></script>
<script src="/commons.js"></script>
<script src="/parity.js"></script>
<script src="/registry.js"></script>
Expand Down
1 change: 1 addition & 0 deletions js/src/dapps/tokenreg.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
</head>
<body>
<div id="container"></div>
<script src="/vendor.bundle.js"></script>
<script src="/commons.js"></script>
<script src="/parity.js"></script>
<script src="/tokenreg.js"></script>
Expand Down
1 change: 1 addition & 0 deletions js/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
</head>
<body>
<div id="container"></div>
<script src="vendor.bundle.js"></script>
<script src="commons.js"></script>
<script src="index.js"></script>
</body>
Expand Down
43 changes: 43 additions & 0 deletions js/vendor.webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
var webpack = require('webpack');

var ENV = process.env.NODE_ENV || 'development';
var isProd = ENV === 'production';

module.exports = {
entry: {
vendor: [
'react', 'react-dom', 'react-redux', 'react-router',
'redux', 'redux-thunk', 'react-router-redux',
'lodash', 'material-ui', 'blockies'
]
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably think we should remove 'babel-polyfill' from commons, add it here as well.

},
output: {
filename: 'vendor.bundle.js',
path: 'build/',
library: 'vendor_lib'
},
plugins: (function () {
var plugins = [
new webpack.DllPlugin({
name: 'vendor_lib',
path: 'build/vendor-manifest.json'
})
];

if (isProd) {
plugins.push(new webpack.optimize.OccurrenceOrderPlugin(false));
plugins.push(new webpack.optimize.DedupePlugin());
plugins.push(new webpack.optimize.UglifyJsPlugin({
screwIe8: true,
compress: {
warnings: false
},
output: {
comments: false
}
}));
}

return plugins;
}())
};
35 changes: 7 additions & 28 deletions js/webpack.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,14 +18,11 @@ var rucksack = require('rucksack-css');
var webpack = require('webpack');
var path = require('path');

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var WebpackErrorNotificationPlugin = require('webpack-error-notification');

var ENV = process.env.NODE_ENV || 'development';
var isProd = ENV === 'production';

var extractCSS = new ExtractTextPlugin('[name].css', { allChunks: true });

module.exports = {
debug: !isProd,
cache: !isProd,
Expand Down Expand Up @@ -54,15 +51,15 @@ module.exports = {
exclude: /node_modules/,
loaders: isProd ? ['babel'] : [
'react-hot',
'babel'
'babel?cacheDirectory=true'
]
},
{
test: /\.js$/,
include: /dapps-react-components/,
loaders: isProd ? ['babel'] : [
'react-hot',
'babel'
'babel?cacheDirectory=true'
]
},
{
Expand All @@ -74,27 +71,6 @@ module.exports = {
loader: 'file?name=[name].[ext]'
},

// {
// test: /\.css$/,
// include: [/src/],
// loader: extractCSS.extract('style', [
// 'css?modules&sourceMap&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]',
// 'postcss'
// ])
// },
// {
// test: /\.css$/,
// exclude: [/src/],
// loader: extractCSS.extract('style', 'css')
// },
// {
// test: /\.less$/,
// loader: extractCSS.extract('style', [
// 'css',
// 'less'
// ])
// },

{
test: /\.css$/,
include: [/src/],
Expand Down Expand Up @@ -152,7 +128,10 @@ module.exports = {
],
plugins: (function () {
var plugins = [
// extractCSS,
new webpack.DllReferencePlugin({
context: '.',
manifest: require('./build/vendor-manifest.json')
}),

new WebpackErrorNotificationPlugin(),
// TODO [todr] paths in dapp-styles is hardcoded for meteor, we need to rewrite it here
Expand Down Expand Up @@ -195,7 +174,7 @@ module.exports = {
return plugins;
}()),
devServer: {
contentBase: './src',
contentBase: './build',
historyApiFallback: false,
quiet: false,
hot: !isProd,
Expand Down