改進webpack圖像/ css構建時間？

我最近接管了一個前端項目，並注意到dev腳本（帶有熱模塊重新加載等）的初始啓動時間需要非常長的時間，大約2分鐘。改進webpack圖像/ css構建時間？

將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彙編起來，或以某種方式緩存資產？

來源

2017-08-31 Isaac Hinman

不是一個可行的解決方案，但只是好奇 - 你的電腦跑掉硬盤或SSD？ –

@JonUleis它有一個SSD，爲什麼？ –

升級到SSD大大提高了我的編譯時間 - 因爲您已經在一個編譯時間內，這聽起來像是一個真正緩慢的編譯過程。 –

提高的WebPack的性能構建/熱重裝，我通常檢查下面的列表，並確保我在做正確的事情：

對於開發模式ENV，設置正確的「源 - 地圖'。通常情況下，我會選擇'eval'，這似乎是最快的。你可以在這裏找到基準：https://webpack.js.org/configuration/devtool/?_sm_au_=iHV0NZ57NZfZ44WQ
對於dev模式env，刪除所有的優化插件，因爲他們需要額外的時間，只在生產中使用它們。
對於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'來檢查任何模塊是否過時。
確保電腦運行速度不太慢。嘗試重新啓動。

來源

2017-09-01 05:13:17 MattYao

改進webpack圖像/ css構建時間？

回答

相關問題