Webpack 开发服务器在 css 更改时慢编译顺风

Posted 2023-03-07

【中文标题】Webpack 开发服务器在 css 更改时慢编译顺风

【英文标题】：Webpack dev server slow compile on css change with tailwind

【发布时间】：2020-12-22 09:14:02

【问题描述】：

我正在使用 webpack、tailwind 和 postcss。我在很多地方看到有人说 postcss 比 libsass 快，但对我来说它的工作速度要慢得多。

在 libsass 中，如果我对 scss 文件进行更改，它会在大约 40 毫秒内编译。在运行开发服务器时使用我的 webpack 设置，每次我进行 css 更改时都需要 1000 毫秒到 1500 毫秒。我知道这并不激烈，但当我习惯于对第二台显示器进行即时更新时，这足以让我烦恼。

我认为问题在于我的 webpack 设置。我的主要入口点是index.tsx。起初在这个文件中我正在导入我的 css，所以我最终会得到：

bundle.js bundle.css

每当我进行更改时，它都必须重新编译所有内容，而且顺风 css 本身就是几个 mb，所以我猜这就是它变慢的原因。

如果我对小型自定义 css 进行更改，则必须重新编译所有 js 和未更改的 tailwind 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 时，所有内容都会重建，而不仅仅是这个文件。这样做，初始构建时间相同，更新后的第二次构建速度快了大约 200 毫秒，但仍远不及使用 libsass 的性能。

我必须做些什么才能编辑main.css，而这部分可以快速构建和构建？

【问题讨论】：

我不确定这是否有帮助，但我也用 tailwind 进行了非常缓慢的编译，帮助从 postcss 中删除 autoprefixer 插件。也许您可以尝试做类似的事情，逐步删除开发不需要的插件。

我发现如果我将我的 webpack 配置拆分为多个配置，那么它将分别重新构建每个配置，这样可以解决速度问题，因为我可以将我的自定义 css 分离到它自己的配置中。感谢您的建议

【参考方案1】：

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