Блог

Я использую webpack, tailwind и postcss. Я видел во многих местах людей, говорящих, что postcss быстрее, чем libsass, но для меня он работает намного медленнее.

В libsass, если я вношу изменения в файл scss, он компилируется примерно за 40 мс. С моей настройкой webpack при запуске сервера разработки каждый раз, когда я вношу изменение css, требуется 1000-1500 мс. Я знаю, что это не радикально, но этого достаточно, чтобы раздражать меня, когда я привык к почти мгновенным обновлениям моего второго монитора.

Я думаю, что проблема в моей настройке webpack. Моя основная точка входа index.tsx . Сначала внутри этого файла я импортировал свой css, поэтому в итоге получал:

• bundle.js
• bundle.css

Каждый раз, когда я вносил изменения, приходилось все перекомпилировать, и только css tailwind составляет несколько Мб, так что, я думаю, именно поэтому он медленный.

Если я внесу изменения в небольшой пользовательский css, ему придется перекомпилировать все js и tailwind css, который не изменился.

Поэтому в идеале я хочу, чтобы эти файлы выводились:

• bundle.js — все файлы ts, на которые ссылаются из index.ts
• bundle.css — если на какой-либо css есть ссылка из javascript, он будет отправлен сюда
• tailwind.css — это скомпилированные стили tailwind
• main.css — это всего лишь мои собственные стили, и они должны компилироваться очень быстро, потому что это относительно небольшой файл

Я удалил импорт css из index.tsx и использовал эту конфигурацию:

 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 .

Когда я вношу изменения в main.css с запущенным сервером разработки, все перестраивается, а не только этот файл. При этом начальная сборка выполняется в то же время, а вторая сборка после обновления выполняется примерно на 200 мс быстрее, но по-прежнему не приближается к производительности работы с libsass.

Что мне нужно сделать, чтобы я мог редактировать main.css , и только эта часть будет быстро собираться?

Для Tailwind2 метод разделения может больше не работатьhttps://github.com/tailwindlabs/tailwindcss/issues/2544