Question

我最近接管了一个前端项目，并注意到dev脚本的初始启动时间（使用热模块重新加载等）需要很长时间，大约2分钟。

将verbose设置为true之后，我意识到几乎所有这些时间都花在重新编译CSS和图像上，甚至没有改变。

webpack构建的输出是一个很长的列表，如下所示：

---------
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文件中的每一个都需要半秒钟来编译，并且有几十个。

以下是我的webpack配置：

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,
  }),
};

有什么建议加快CSS编译速度，或以某种方式缓存资产？

Answer 1

为了提高Webpack构建/热重新加载的性能，我通常会检查以下列表并确保我做的正确：

对于开发模式env，设置正确的'source-map'。通常情况下，我选择'eval'似乎是最快的。您可以在此处找到基准：https://webpack.js.org/configuration/devtool/?_sm_au_=iHV0NZ57NZfZ44WQ
对于开发模式环境，删除所有优化插件，因为它们需要额外的时间，并且只在生产中使用它们。
对于dev模式env，检查package.json中的加载器版本，特别是对于css-loader，style-loader和sass-loader，因为某些最新版本可能会降低构建速度。请查看https://github.com/webpack-contrib/css-loader/issues/124了解详情。
升级到Babel 6可以提升10％-20％的性能。
将webpack-dev-server用于开发模式环境
始终运行“npm outdated”以检查任何模块是否过旧。
确保计算机运行速度不是太慢。尝试重新启动。

改善webpack图像/ css构建时间？

1 个答案: