webpack - 提高 webpack 的 CSS 编译性能

Question

我正在尝试使用 sass-loader 将我们的 SASS 构建从 gulp + node-sass 迁移到 webpack。

作为引用点，gulp + node-sass 3.2 为我们提供了大约 2.5-3 秒的构建时间。

在 webpack 中，如果我使用 style!raw!sass 进行加载，我会看到 10~ 秒的构建，并且没有源映射(因为原始加载器)。如果我让源映射的 css 加载器正常工作，额外的解析会使构建在天气好的时候需要 20-30 秒。

我想知道我可以使用什么技巧来改进事情。现在我能做的最好的事情就是通过将大量 require(...) 从 javascript 拆分为 SASS，然后将其连接到一个文件中。使用 -watch 选项，允许进行一些假增量编译，因此在初始构建之后，情况还不错。

我想知道除此之外我是否可以做一些事情来让它变得更好。比 gulp + Nodesass 慢 10 倍并不是很好，但是拥有 2 个构建工具也不是很好(webpack 对于 JS 来说可以 100% 正常工作，即使有大量代码)

Answer 1

请查看这篇关于 webpack、预处理器、源映射和构建速度的精彩文章: http://eng.localytics.com/faster-sass-builds-with-webpack/

我目前正在使用带有node-sass(和libsass)的sass-loader、cssmodules(具有独立的样式表，每个组件/容器一个)、内联sourceMaps和HMR。使用更新的样式重新加载已修改的组件需要 2-3 秒。

您可以在此处查看配置示例: https://github.com/erikras/react-redux-universal-hot-example/blob/master/webpack/dev.config.js