我使用的是webpack、tailwind和postpass。我在很多地方看到人们说postss比libsass快，但对我来说，它的工作速度要慢得多。
在libsass中，如果我对scss文件进行更改，它将在大约40ms内编译。在运行dev-server时，我的webpack设置每次更改css都需要1000ms-1500ms。我知道这并不激烈，但当我习惯于对第二台显示器进行近乎即时的更新时，这足以让我恼火。
我认为问题出在我的webpack设置上。我的主要切入点是index.tsx。起初，在这个文件中，我导入了我的css，所以我最终会得到：
- bundle.js
- bundle.css
每当我做出更改时，它都必须重新编译所有内容，而顺风css本身就是几个mb，所以我想这就是它速度慢的原因。
如果我对小的自定义css进行了更改，它必须重新编译所有的js和没有更改的顺风css。
所以理想情况下，我想要的是输出这些文件：
- bundle.js-从index.ts引用的所有ts文件
- bundle.css-如果从javascript引用了任何css，它将转到此处
- tailwind.css-这是已编译的顺风样式
- main.css-这只是我自己的风格，应该编译得很快，因为这是一个相对较小的文件
我从index.tsx中删除了css导入，并使用了以下配置：
const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry: {
'bundle': './src/index.tsx',
'tailwind': './src/css/tailwind.css',
'main': './src/css/main.css',
},
mode: 'development',
devtool: 'inline-source-map',
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
module: {
rules: [
{
test: /.tsx?$/,
use: 'ts-loader',
exclude: /node_modules/,
},
{
test: /.css$/,
exclude: /node_modules/,
use: [
{
loader: MiniCssExtractPlugin.loader,
options: {
// // only enable hot in development
hmr: process.env.NODE_ENV === 'development',
// // if hmr does not work, this is a forceful method.
// reloadAll: true,
}
},
{
loader: 'css-loader',
options: {
importLoaders: 1,
}
},
{
loader: 'postcss-loader'
}
],
},
],
},
resolve: {
extensions: ['.tsx', '.ts', '.js', '.jsx'],
},
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
devServer: {
contentBase: './dist',
port: 3366,
hot: true,
writeToDisk: true
},
};
这确实输出了我提到的我想要的所有文件，但它也输出了一个不需要的main.js和tailwind.js文件。
当我在devserver运行的情况下对main.css进行更改时，一切都会重建，而不仅仅是这个文件。这样做的话，初始构建的时间是相同的，更新后的第二次构建速度大约快200ms，但仍然无法达到使用libsass的性能。
我必须做些什么才能编辑main.css，并且该部分将快速构建？
对于Tailwind2，拆分技术可能不再有效https://github.com/tailwindlabs/tailwindcss/issues/2544