Question

我试图将sass构建切换到Webpack以删除gulp（并维护更少的工具）。

webpack中的JS构建很快，我没有任何问题。

我的gulp scss构建速度非常快，只需不到一秒钟。

gulp.task('css', function(){
    return gulp.src('styles/main.scss')
        .pipe(sass({ outputStyle: "compressed" }).on('error', sass.logError))
        .pipe(autoprefixer({
            browsers: ['> 0%'],
            cascade: false
        }))
        .pipe(gulp.dest('public/css'));
});

然而，我尝试在Webpack中重新实现相同的内容，我需要10次secondes，第一次构建，但也是监视过程！

这是webpack代码：

{
  entry: {
    app: path.resolve(__dirname, 'styles/main.scss'),
    // vendor: ['vendor'],
  },
  output: {
    path: path.resolve(__dirname,'./public/css'),
    filename: 'main.css'
  },
  devtool: "inline-eval-cheap-source-map",
  module: {
    loaders: [
      {
        test: /\.css$/,
        loaders: ['postcss-loader', 'resolve-url-loader']
      },
      {
        test: /\.scss$/,
        loaders: ['css-loader', 'postcss-loader', 'resolve-url', 'sass-loader?sourceMap']
      },
      {
        test: /\.(ttf|eot|svg|png|jpg|woff2|woff|jpeg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
        loader: 'ignore-loader' // old: 'file-loader'
      }
    ],
  },
  postcss: [ autoprefixer({
    browsers: ['> 0%'], // ['last 2 versions'],
    cascade: false
  })
}];

为什么这个过程慢了10倍？我该怎么做才能加快速度？谢谢！

Answer 1

加载器将应用于您在应用程序中导入的所有模块，其中一些模块可能是node_modules文件夹中的 npm packages 。

尝试使用exclude属性排除这些包，例如：

module.exports = {
  // ...
  {
    test: /\.css$/,
    loaders: ['postcss-loader', 'resolve-url-loader'],
    exclude: /node_modules/
  },
  {
    test: /\.scss$/,
    loaders: ['css-loader', 'postcss-loader', 'resolve-url', 'sass-loader?sourceMap'],
    exclude: /node_modules/
  },
  {
    test: /\.(ttf|eot|svg|png|jpg|woff2|woff|jpeg|gif)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
    loader: 'ignore-loader', // old: 'file-loader'
    exclude: /node_modules/
  }
  // ...
}

或者，您可以使用include仅将这些加载器应用于styles文件夹中的文件。

Answer 2

我通过删除sass-loader和resolve-url-loader并使用fast-sass-loader解决了我的问题。

我的重建时间从4-6秒到700毫秒。

Webpack的性能问题

2 个答案: