Webpack开发服务器随顺风缓慢地在CSS更改上编译

问题描述

我正在使用webpack，顺风和postcss。我在很多地方都看到人们说postcss比libsass快，但对我来说它的工作要慢得多。

在libsass中，如果我对一个scss文件进行更改，它将在大约40毫秒内编译。使用我的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$/,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进行更改时，所有内容都会重新生成，而不仅仅是这个文件。这样做的话，最初的构建是相同的，而更新后的第二个构建则要快200毫秒左右，但仍与使用libsass的性能相差甚远。

我该怎么做才能编辑main.css，仅此部分就可以快速构建和构建？

解决方法

对于Tailwind2，拆分技术可能不再起作用https://github.com/tailwindlabs/tailwindcss/issues/2544