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

Posted 2023-03-08

【中文标题】改进 webpack 图像/css 构建时间？

【英文标题】：Improve webpack image/css build time?

【发布时间】：2018-02-09 17:34:19

【问题描述】：

我最近接手了一个前端项目，注意到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 编译速度或以某种方式缓存资产吗？

【问题讨论】：

不是一个可行的解决方案，但只是好奇 - 您的计算机是靠硬盘驱动器还是 SSD 运行的？

@JonUleis 它有一个 SSD，为什么？

升级到 SSD 大大缩短了我的编译时间 - 因为您已经使用了，这听起来确实是一个非常缓慢的构建过程。

【参考方案1】：

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

对于开发模式环境，设置正确的“源映射”。通常，我会选择“eval”，这似乎是最快的。您可以在此处找到基准：https://webpack.js.org/configuration/devtool/?_sm_au_=iHV0NZ57NZfZ44WQ

对于开发模式环境，删除所有优化插件，因为它们需要额外的时间，并且只在生产中使用。

对于开发模式环境，请检查 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' 来检查任何模块是否太旧。

确保计算机没有运行太慢。尝试重新启动。