Skip to content

feat(build): minify/optimize component stylesheets #4259

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
hansl merged 1 commit into from Jan 30, 2017
Merged

feat(build): minify/optimize component stylesheets #4259

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
feat(build): minify/optimize component stylesheets
  • Loading branch information
Charles Lyding committed Jan 28, 2017
commit f99dc6f7ef1ee8db1827774748c5835c1d3fa653
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,6 +48,7 @@
"chalk": "^1.1.3",
"common-tags": "^1.3.1",
"css-loader": "^0.26.1",
"cssnano": "^3.10.0",
"debug": "^2.1.3",
"denodeify": "^1.2.1",
"diff": "^2.2.2",
Expand Down Expand Up @@ -83,7 +84,6 @@
"opn": "4.0.1",
"ora": "^0.2.0",
"portfinder": "1.0.9",
"postcss-discard-comments": "^2.0.4",
"postcss-loader": "^0.9.1",
"quick-temp": "0.1.5",
"raw-loader": "^0.5.1",
Expand Down
1 change: 0 additions & 1 deletion packages/angular-cli/models/webpack-configs/production.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,6 @@ export const getProdConfig = function (wco: WebpackConfigOptions) {
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
}),
new webpack.LoaderOptionsPlugin({ minimize: true }),
new webpack.optimize.UglifyJsPlugin(<any>{
Copy link
Copy Markdown
Contributor

@filipesilva filipesilva Jan 28, 2017

Choose a reason for hiding this comment

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

I think in general this is still needed, because it signals all loaders to minimize.

So we do it for JS via uglifyjs, and for CSS via cssnano, but I assume (haven't tested) that the some of the other loaders (file/url loader perhaps) are also affected?

@theLarkin do you know?

Copy link
Copy Markdown
Member Author

@clydin clydin Jan 28, 2017

Choose a reason for hiding this comment

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

Of the loaders currently used only css-loader, less-loader, and sass-loader use the minimize setting. The last two use the setting to turn on internal minification, which isn't need if cssnano is used (or css-loader with minimize enabled).
less.js also deprecated the underlying compress option that the less-loader is using via the minimize setting.

mangle: { screw_ie8: true },
compress: { screw_ie8: true, warnings: buildOptions.verbose },
Expand Down
7 changes: 4 additions & 3 deletions packages/angular-cli/models/webpack-configs/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
import { extraEntryParser, getOutputHashFormat } from './utils';
import { WebpackConfigOptions } from '../webpack-config';

const postcssDiscardComments = require('postcss-discard-comments');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
const ExtractTextPlugin = require('extract-text-webpack-plugin');

Expand Down Expand Up @@ -34,9 +34,10 @@ export function getStylesConfig(wco: WebpackConfigOptions) {
const globalStylePaths: string[] = [];
const extraPlugins: any[] = [];

// discard comments in production
// minify/optimize css in production
// autoprefixer is always run separately so disable here
const extraPostCssPlugins = buildOptions.target === 'production'
? [postcssDiscardComments]
? [cssnano({ safe: true, autoprefixer: false })]
: [];

// determine hashing format
Expand Down
2 changes: 1 addition & 1 deletion packages/angular-cli/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@
"chalk": "^1.1.3",
"common-tags": "^1.3.1",
"css-loader": "^0.26.1",
"cssnano": "^3.10.0",
"debug": "^2.1.3",
"denodeify": "^1.2.1",
"diff": "^2.2.2",
Expand Down Expand Up @@ -70,7 +71,6 @@
"opn": "4.0.1",
"ora": "^0.2.0",
"portfinder": "1.0.9",
"postcss-discard-comments": "^2.0.4",
"postcss-loader": "^0.9.1",
"quick-temp": "0.1.5",
"raw-loader": "^0.5.1",
Expand Down