提高webpack图像/ CSS编译时间？
我最近接pipe了一个前端项目，并注意到dev脚本的初始启动时间（带有热模块重装等）需要很长时间，大约2分钟。
将verbose设置为true ，我意识到几乎所有的时间都花在重新编译甚至没有改变的CSS和图像上。
webpack构build的输出是一个很长的列表，如下所示：
--------- Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/background.jpg --------- Hash: 0f500227a855ef9eb67c Version: webpack 2.1.0-beta.8 Time: 68ms Asset Size Chunks Chunk Names .webpack.res.1504199219496_875923.js 132 kB 0 [emitted] main + 1 hidden modules --------- Webpack stdout for /Users/myuser/Documents/repos/myApp-frontend/client/modules/App/AppAuthorized.css --------- Hash: 83f1c479b77c7539baeb Version: webpack 2.1.0-beta.8 Time: 549ms Asset Size Chunks Chunk Names .webpack.res.1504199221679_732531.js 23.2 kB 0 [emitted] main + 5 hidden modules
图像似乎很快处理，但这些2kb css文件中的每一个都花费了半秒的时间进行编译，并且有几十个。
这是我的webpackconfiguration看起来像：
var cssnext = require('postcss-cssnext'); var postcssFocus = require('postcss-focus'); var postcssReporter = require('postcss-reporter'); var precss = require('precss'); var syntax = require('postcss-scss'); module.exports = { output: { publicPath: '/', libraryTarget: 'commonjs2', }, resolve: { extensions: ['', '.js', '.jsx'], modules: [ 'client', 'node_modules', ], }, module: { loaders: [ { test: /\.css$/, exclude: /node_modules/, loader: 'cache-loader!style-loader!css-loader?localIdentName=[name]__[local]__[hash:base64:5]&modules&importLoaders=1&sourceMap!postcss-loader', }, { test: /\.jpe?g$|\.gif$|\.png$|\.svg$/i, exclude: /node_modules/, loader: 'cache-loader!url-loader?limit=9999999999999', }, { test: /\.ico$/, loader: 'file-loader?name=[name].[ext]' }, ], }, postcss: () => ({ plugins: [ precss(), postcssFocus(), cssnext({ browsers: ['last 2 versions', 'IE > 10'], }), postcssReporter({ clearMessages: true, }), ], syntax: syntax, }), };
任何build议，以加快CSS编译，或caching资产莫名其妙？
为了提高Webpack构build/热重载的性能，我通常检查下面的列表，并确保我做的是正确的事情：
-
对于开发模式env，设置正确的“源地图”。 通常情况下，我会select“eval”，这个似乎是最快的。 你可以在这里find基准： https ： //webpack.js.org/configuration/devtool/？_sm_au_ = iHV0NZ57NZfZ44WQ
-
对于开发模式env，删除所有的优化插件，因为他们需要额外的时间，只有在生产中使用它们。
-
对于dev模式env，请检查package.json中的加载器版本，尤其是对于css-loader，style-loader和sass-loader，因为某些最新版本可能会降低构build速度。 查看https://github.com/webpack-contrib/css-loader/issues/124了解更多详情。
-
升级到Babel 6可能会使性能提升10％-20％。
-
使用webpack-dev-server进行开发模式env。
-
总是运行“npm过时”来检查任何模块是否太旧。
-
确保电脑运行不太慢。 尝试重新启动。