webpack plug url-loader Use

In fact, when it comes to performance optimization, he's too broad, and today we just chat via http webpack configuration reduces the number of requests this spot.

Briefly problem encountered in the work of it, we do a project in the home with more than a dozen pictures, each picture is a static resource, so there will be http request, in order to reduce the request, we can base64-encoded method to display the picture. webpack there is a package called url-loader, he can be html and css pictures packaged into base64, but if there js pictures url does not compile successfully (I'll explain later), I enclose two pictures look ordinary picture after picture and base64 encoding so what's different now.

Simply put, base64 string is encrypted string. And the picture is base64 encoded (see note this figure, why some base64 map used some did not, this is a reason, which we explain later) without the http request.

Okay, now back to our first protagonist --url-loader, simply look at his right configuration parameters.

{
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader: 'url-loader',
                include: [resolve('static'),resolve('src')],
                options: {
                    limit: 100000,
                    name: utils.assetsPath('img/[name].[hash:7].[ext]')
                }
}

I use vue-cli scaffolding tools, so this is really webpack.base.config, js configured, test match is a regular picture format, loader using url-loader, options are the configuration options, such as we generally will be less than 8kb the picture only to do base64 conversion, to control this thing (of course, we are less than 100kb) through the limit, name is the custom image path and name, include that which you want folder inside the picture url-loader conversion, it is recommended to write on include, if global search will not write, inefficient, and the folder will not write the whole error. Of course, there is a format that can be written directly in the loader is in the form of a query to the assembly options.

{
    test: /\.(gif|jpg)$/,
    loader: 'url-loader?limit=30000',
    options: {
        name: '[name].[ext]?[hash]'
    }
}

Here you configure the name attribute specific look of it, he was with a bunch of config file that assetsPath to use,

index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: '/'

index must be an absolute path on the local file system.

assetsRoot is the root of all static resources (must be absolute path)
assetsSubDirectory is being processed webpack had compiled a file, for example, we want to use url-loader processing Image
assetsPublicPath this is the root path http server running (such as our line is www. baidu.com/indexbeta this path as the root, it is necessary to change it to '/ indexbeta /').

The final line will be presented this path

Now we know that image-url after the package is based on the configuration parameters and url-loader to generate the name of. Then came the question, since there is the good thing, is not it can make all the pictures are showing base64, it is certainly not, because of the above goes encoded png less than 5kb, the picture is too large base64 string longer , so might as well use the http request, which is why the default limit is 10,000, that is, let the picture within 8kb talented coding.

But our project some picture list is traversed out with v-for, that is, put the js url (data vue file's), so can not be base64 encoded, url-loader only to compile and html css in the image. So you can use the import picture by way of a variable to accept, then these variables will go into v-for rendering.

When we use the base64 transcoding Home rendering time by two seconds, it is not to force it.