92％的块资产优化 - webpack [英] 92% chunk asset optimization - webpack
问题描述
似乎webpack卡在
92％块资产优化上大约30秒以上，以显示简单的js / css更改。这对于任何理智的人来说都是太久了，他们可以坐下来等待那么多生命，看看应该立即呈现的东西。
It seems that webpack gets stuck on 92% chunk asset optimization for about 30+ seconds to show a simple js/css change. This is too long for anyone sane to sit and wait that much of their life to see something that should be rendered near instantly.
我们处于开发模式（所以我们需要源映射，这会增加延迟）但它应该不会超过30秒。另外，我们没有使用uglify（我在GitHub上看到它占用了大量的时间）。
We're in development mode (so we need source maps, which add to the latency) but it should still NOT be 30+ seconds. Also, we're not using uglify (which I've seen mentioned on GitHub as taking up a good amount of time).
我们如何才能获得构建时间到是接近即时，还是比现在快得多？
How can we get the build time to be near instant, or much much faster than right now?
更新
这是 laravel-mix 文件：
let mix = require('laravel-mix');
mix.react('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.options({
processCssUrls: false
});
mix.webpackConfig({
// Note: First build will always be slower regardless
// Here we're talking about rebuild time
// If commented out, rebuild is ~6 secs
// devtool: "inline-source-map",
// If not commented out, rebuild is 30+ secs
devtool: "inline-source-map",
});
我发现 inline-source-map to是最快的调试，因为它提供了在源代码中修复哪一行错误的最详细信息，非常直接地解决了什么问题。我发现其他类型比较神秘，并且没有迹象表明要在源代码中修复哪个行号，因此调试需要更长时间。
I found inline-source-map to be the best for quickest debugging, as it provides the most detail on which line of error to fix in source, very very straight forward on what to fix where. I find other types are more cryptic in comparison and there is no indication of which line number to fix in source, so it takes much longer to debug.
你们怎么样？做到了吗？有没有办法真正快速重建，同时仍然能够使用源代码中的错误行号进行调试来修复它（在chrome devtools控制台中显示）？
How do you guys do it? Is there a way to rebuild really fast while still being able to debug with the error line number in source to fix it (shown in chrome devtools console)?
推荐答案
我使用以下组合获得了巨大的成功：
I've had great success using a combination of the following:
https://github.com/mzgoddard/hard-source-webpack-plugin
和
https://github.com/amireh / happypack
HardSourceWebpackPlugin是webpack的插件，为模块提供中间缓存步骤。为了查看结果，您需要使用此插件运行webpack两次：第一次构建将花费正常的时间。第二个版本将显着加快。
HardSourceWebpackPlugin is a plugin for webpack to provide an intermediate caching step for modules. In order to see results, you'll need to run webpack twice with this plugin: the first build will take the normal amount of time. The second build will be signficantly faster.
HappyPack通过并行转换文件使初始webpack构建更快。
HappyPack makes initial webpack builds faster by transforming files in parallel.
报告回来，让我知道它是怎么回事。
Report back and let me know how it goes.
这篇关于92％的块资产优化 - webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
