Run minification and tree shaking on build
"npm run build" now builds an artifact optimized for production use. The removes dead code, and minizes the result. The size of the bundle shrinks from about 14MB to 2MB. The previous build command is moved to "npm run build:dev". Change-Id: I21430f06049c4eeeb4a66c7143da8c2919fb5a24 Closes-Bug: 1688610
This commit is contained in:
parent
2154da48dd
commit
8d47410fe5
@ -69,10 +69,11 @@
|
||||
"webpack-merge": "^4.1.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack --bail",
|
||||
"lint": "eslint --max-warnings 0 src && prettier --single-quote --list-different 'src/**/*.js'",
|
||||
"prettier": "prettier --write --single-quote 'src/**/*.js'",
|
||||
"start": "webpack-dev-server --progress",
|
||||
"build": "webpack --env=prod --bail --progress",
|
||||
"build:dev": "webpack --env=dev --bail --progress",
|
||||
"start": "webpack-dev-server --env=dev --progress",
|
||||
"test": "jest",
|
||||
"test:watch": "jest --watchAll",
|
||||
"json2pot": "rip json2pot ./i18n/extracted-messages/**/*.json -o ./i18n/messages.pot",
|
||||
|
97
webpack.common.js
Normal file
97
webpack.common.js
Normal file
@ -0,0 +1,97 @@
|
||||
require('es6-promise').polyfill(); // https://github.com/webpack/css-loader/issues/144
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
entry: __dirname + '/src/js/index.js',
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
publicPath: '/',
|
||||
filename: 'tripleo_ui.js',
|
||||
sourceMapFilename: 'tripleo_ui.js.map'
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html'
|
||||
})
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
// Javascript
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: /src/,
|
||||
exclude: /src\/js\/workers/,
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
|
||||
// Images
|
||||
{
|
||||
test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192, // inline base64 URLs for <=8k images, direct URLs for the rest
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
|
||||
// Fonts and svg images
|
||||
{
|
||||
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192,
|
||||
mimetype: 'application/font-woff',
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192,
|
||||
mimetype: 'application/octet-stream',
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'file-loader',
|
||||
query: { name: '[name].[ext]' }
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192,
|
||||
mimetype: 'image/svg+xml',
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
|
||||
// Plain CSS files
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
|
||||
// Less
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'less-loader?sourceMap'
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
loader: __dirname + '/src/js/loaders/version.js',
|
||||
test: /src\/js\/index.js$/
|
||||
}
|
||||
|
||||
]
|
||||
}
|
||||
};
|
@ -1,108 +1 @@
|
||||
require('es6-promise').polyfill(); // https://github.com/webpack/css-loader/issues/144
|
||||
var HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
|
||||
module.exports = {
|
||||
devtool: 'inline-source-map',
|
||||
entry: __dirname + '/src/js/index.js',
|
||||
output: {
|
||||
path: __dirname + '/dist',
|
||||
publicPath: '/',
|
||||
filename: 'tripleo_ui.js',
|
||||
sourceMapFilename: 'tripleo_ui.js.map'
|
||||
},
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: 'src/index.html'
|
||||
})
|
||||
],
|
||||
module: {
|
||||
rules: [
|
||||
// Javascript
|
||||
{
|
||||
test: /\.js$/,
|
||||
include: /src/,
|
||||
exclude: /src\/js\/workers/,
|
||||
loader: 'babel-loader'
|
||||
},
|
||||
|
||||
// Images
|
||||
{
|
||||
test: /\.(png|jpg|gif)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192, // inline base64 URLs for <=8k images, direct URLs for the rest
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
|
||||
// Fonts and svg images
|
||||
{
|
||||
test: /\.(woff|woff2)(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192,
|
||||
mimetype: 'application/font-woff',
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192,
|
||||
mimetype: 'application/octet-stream',
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
{
|
||||
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'file-loader',
|
||||
query: { name: '[name].[ext]' }
|
||||
},
|
||||
{
|
||||
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
|
||||
loader: 'url-loader',
|
||||
query: {
|
||||
limit: 8192,
|
||||
mimetype: 'image/svg+xml',
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
},
|
||||
|
||||
// Plain CSS files
|
||||
{
|
||||
test: /\.css$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader'
|
||||
]
|
||||
},
|
||||
|
||||
// Less
|
||||
{
|
||||
test: /\.less$/,
|
||||
use: [
|
||||
'style-loader',
|
||||
'css-loader',
|
||||
'less-loader?sourceMap'
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
loader: __dirname + '/src/js/loaders/version.js',
|
||||
test: /src\/js\/index.js$/
|
||||
}
|
||||
|
||||
]
|
||||
},
|
||||
devServer: {
|
||||
contentBase: './dist',
|
||||
host: '0.0.0.0',
|
||||
port: 3000,
|
||||
stats: {
|
||||
colors: true
|
||||
},
|
||||
historyApiFallback: true,
|
||||
inline: true
|
||||
}
|
||||
};
|
||||
module.exports = env => require(`./webpack.${env}.js`)();
|
||||
|
24
webpack.dev.js
Normal file
24
webpack.dev.js
Normal file
@ -0,0 +1,24 @@
|
||||
const webpack = require('webpack');
|
||||
const merge = require('webpack-merge');
|
||||
const CommonConfig = require('./webpack.common.js');
|
||||
|
||||
module.exports = env => {
|
||||
return merge(CommonConfig, {
|
||||
devtool: 'source-map',
|
||||
devServer: {
|
||||
contentBase: './dist',
|
||||
host: '0.0.0.0',
|
||||
port: 3000,
|
||||
stats: {
|
||||
colors: true
|
||||
},
|
||||
historyApiFallback: true,
|
||||
inline: true
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('development')
|
||||
})
|
||||
]
|
||||
});
|
||||
};
|
35
webpack.prod.js
Normal file
35
webpack.prod.js
Normal file
@ -0,0 +1,35 @@
|
||||
const webpack = require('webpack');
|
||||
const merge = require('webpack-merge');
|
||||
const CommonConfig = require('./webpack.common.js');
|
||||
|
||||
const license = `TripleO UI
|
||||
https://github.com/openstack/tripleo-ui
|
||||
|
||||
Copyright 2017 Red Hat Inc.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.`;
|
||||
|
||||
module.exports = env => {
|
||||
return merge(CommonConfig, {
|
||||
devtool: 'source-map',
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
sourceMap: true
|
||||
}),
|
||||
new webpack.BannerPlugin(license),
|
||||
new webpack.DefinePlugin({
|
||||
'process.env.NODE_ENV': JSON.stringify('production')
|
||||
})
|
||||
]
|
||||
});
|
||||
};
|
Loading…
Reference in New Issue
Block a user