用于制作的W​​ebpack图像

时间:2016-11-25 23:02:46

标签: javascript reactjs webpack

在为NGINX / Node配置我的vps的同时对我的显示器大喊一周后,我已经成功运行了我的React应用程序。我现在都是Javascripted(远离动脉瘤的两个控制台错误),并且非常感谢我对webpack配置的一些帮助。

目前我有一个src文件夹,可以使用webpack进行构建,然后抛入dist文件夹中的bundle.js文件(通常)。但是,我认为我没有正确使用webpack,或者至少充分发挥其潜力。

由于我还不是Webpack的专家,我目前所有的图像都已经位于dist文件夹中,并且它们不是通过webpack运行的。我有一个潜在的怀疑,这就是为什么我的主要“英雄”图像在我访问应用程序主页时需要大约一秒钟加载的原因,这是一个非常明显的延迟和不专业的看。然而,其他一切都非常快速。

我已经为我的图像设置了这个加载程序(不知道这是什么,但我在interwebz上得到了它。)

public class FileProcessor
{
    public async Task ProcessFile()
    {
        List<Task> tasks = new List<Task>();
        var lines = File.ReadAllLines("File.txt").Batch(100);
        foreach (IEnumerable<string> linesBatch in lines)
        {
            IEnumerable<string> localLinesBatch = linesBatch;
            Task task = Task.Factory.StartNew(() =>
            {
                // Perform operation on localLinesBatch
            });
            tasks.Add(task);
        }

        await Task.WhenAll(tasks);
    }
}

public static class LinqExtensions
{
    public static IEnumerable<IEnumerable<TSource>> Batch<TSource>(
              this IEnumerable<TSource> source, int size)
    {
        TSource[] bucket = null;
        var count = 0;

        foreach (var item in source)
        {
            if (bucket == null)
                bucket = new TSource[size];

            bucket[count++] = item;
            if (count != size)
                continue;

            yield return bucket;

            bucket = null;
            count = 0;
        }

        if (bucket != null && count > 0)
            yield return bucket.Take(count);
    }
}

有没有人知道在处理图像时什么是好的做法?我只是试图阻止对我的css中的任何图像的所有调用,如果我实现它,就会破坏。这是我的scss成功链接到dist / img /文件夹

的示例
{
   test: /\.(jpe?g|gif|png)$/,
   loader: 'file-loader?emitFile=false&name=[path][name].[ext]'
}

0 个答案:

没有答案