до сих пор самый маленький пучок, который я могу создать с угловым кликом, запустив
ng build --aot true -prod
Мне было интересно, если процесс сборки также удаляет неиспользуемые классы CSS, например, из начальной загрузки?
Если нет, то как я могу добавить к нему такие библиотеки, какrifycss?
РЕДАКТИРОВАТЬ Апрель 2018
Я до сих пор не нашел ни одного удовлетворительного решения его проблемы, особенно такого, которое совместимо с ленивыми загрузочными модулями с угловыми...
ура
Если вы используете веб-пакет, вы можете сделать это как: -
Сначала установите purifycss-webpackusing npm i -D purifycss-webpack
module.export={
plugins: [
new ExtractTextPlugin('[name].[contenthash].css'),
// Make sure this is after ExtractTextPlugin!
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'app/*.html')),
})
]
};
Перейдите по ссылке ниже для подробного понимания.
Если вы выбрасываете, т.е. ng eject. Затем вы можете настроить сборку webpack, чтобы сделать что угодно. У меня есть пара опций, включенных для минимизации стилей как части сборки с помощью minifyCSS в двух плагинах.
LoaderOptionsPlugin
new LoaderOptionsPlugin({
"sourceMap": false,
"options": {
"html-minifier-loader": {
"removeComments": true,
"collapseWhitespace": true,
"conservativeCollapse": true,
"preserveLineBreaks": true,
"caseSensitive": true,
"minifyCSS": true
},
HtmlWebpackPlugin
new HtmlWebpackPlugin({
"template": "./src\\index.ejs",
"filename": "./index.html",
"hash": true,
"inject": true,
"compile": true,
"favicon": 'src/assets/Flag.png',
"minify": {
collapseWhitespace: true,
removeComments: true,
minifyCSS: true
},
Может быть, вы можете взглянуть на https://github.com/Angular-RU/angular-cli-webpack. Это дает вам возможность изменить конфигурацию веб-пакета без извлечения. И угадайте, как выглядит первый пример: удаляет неиспользуемые селекторы из вашего CSS. Я не пробовал сам, но это может быть вариант.
Не знаю, считается ли это ответом, потому что это на самом деле не относится к angular-cli, но я открываю свой проект в возвышенном тексте и запускаю UnusedCssFinder, который выделяет все неиспользуемые свойства в моем файле css.
module.export={
plugins: [
new ExtractTextPlugin('[name].[contenthash].css'),
// Make sure this is after ExtractTextPlugin!
new PurifyCSSPlugin({
// Give paths to parse for rules. These should be absolute!
paths: glob.sync(path.join(__dirname, 'app/*.html')),
})
]
};
сначала установите веб-пакет purycss