【发布时间】：2021-03-12 20:11:40
【问题描述】：
当我使用 Tailwind 通过自定义 webpack 为 Angular 应用程序设置样式时，styles.js 块在运行 ng build 后非常大，大约 30mb。这不仅需要很长时间才能构建，而且还会减慢我的网络应用程序的速度。
清除 Tailwind 后，styles.js 块要小得多（~100kb），但 30mb 看起来大得离谱，甚至没有被清除。
这甚至适用于使用 https://github.com/notiz-dev/ngx-tailwind 构建的新应用程序，所以我不确定是什么导致了问题。
tailwind.config.js
module.exports = {
purge: [],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
variants: {
extend: {},
},
plugins: [],
}
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.scss$/,
loader: 'postcss-loader',
options: {
postcssOptions: {
ident: 'postcss',
syntax: 'postcss-scss',
plugins: [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
],
},
},
},
],
},
};
angular.json
{
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
"ngxTailwind": {
"projectType": "application",
"schematics": {
"@schematics/angular:component": {
"style": "scss"
}
},
"root": "",
"sourceRoot": "src",
"prefix": "app",
"architect": {
"build": {
"builder": "ngx-build-plus:browser",
"options": {
"extraWebpackConfig": "webpack.config.js",
"outputPath": "dist/ngxTailwind",
"index": "src/index.html",
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
},
"configurations": {
"production": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
}
},
"serve": {
"builder": "ngx-build-plus:dev-server",
"options": {
"extraWebpackConfig": "webpack.config.js",
"browserTarget": "ngxTailwind:build"
},
"configurations": {
"production": {
"browserTarget": "ngxTailwind:build:production"
}
}
},
"extract-i18n": {
"builder": "@angular-devkit/build-angular:extract-i18n",
"options": {
"browserTarget": "ngxTailwind:build"
}
},
"test": {
"builder": "ngx-build-plus:karma",
"options": {
"extraWebpackConfig": "webpack.config.js",
"main": "src/test.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.spec.json",
"karmaConfig": "karma.conf.js",
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": []
}
},
"lint": {
"builder": "@angular-devkit/build-angular:tslint",
"options": {
"tsConfig": [
"tsconfig.app.json",
"tsconfig.spec.json",
"e2e/tsconfig.json"
],
"exclude": [
"**/node_modules/**"
]
}
},
"e2e": {
"builder": "@angular-devkit/build-angular:protractor",
"options": {
"protractorConfig": "e2e/protractor.conf.js",
"devServerTarget": "ngxTailwind:serve"
},
"configurations": {
"production": {
"devServerTarget": "ngxTailwind:serve:production"
}
}
}
}
}
},
"defaultProject": "ngxTailwind",
"cli": {
"analytics": "c9efd59e-9db9-4f26-9a6f-e35b477d8e5a"
}
}
styles.scss
@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';
有人知道它为什么这么大吗？我知道它没有被清除，但https://tailwindcss.com/docs/optimizing-for-production 声称未压缩的大小低于 4mb，为什么我得到了近 7 倍？
【问题讨论】：
-
我看到你提到了
style.js，所以你将它构建为开发版本。如果您实际为生产或使用--extract-css构建它，大小是多少？ -
@penleychan 没有清除，生产版本提供了一个 3.52mb 的 css 文件。这似乎更合理，但即使在开发版本中，30mb 对我来说也很疯狂。
-
这就是它与开发构建的工作方式，其背后的原因是因为
style.css不是一个有效的javascript 模块，所以它需要一些东西来将css 模块更改为js 模块，那就是加载器。所以style.js拥有你所有的 css 并包括 javascript 加载器 -
@penleychan，我当然希望它更大，但 30mb？它只是让开发变得痛苦，因为每当进行任何样式更改时都需要大约一分钟的时间来构建。当我使用 Bootstrap 时，styles.js 更小，构建时间也更快。
-
我也遇到了同样的问题。这是不正常的，因为未压缩的顺风约为 3MB。好像被收录了10次！？ @JacobSwetmore 你找到根本原因了吗？
标签： css angular webpack tailwind-css postcss