Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "the method of picture compression processing when vue-cli3 packaging". In the operation of the actual case, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Picture compression when vue-cli3 is packaged

When we use relative paths in JavaScript, CSS, or *. Vue files (must be. When a static resource is referenced, it will be included in the dependency graph of webpack.

In the process of compilation, all such as

, background: url (...) And the resource URL of CSS @ import is resolved as a module dependency.

Internally, vue determines the final image path through file-loader with the version hash value and the correct public base path, and then uses url-loader to inline images smaller than 4kb to reduce the number of HTTP requests.

We can adjust the size limit of the image through chainWebpack.

For example

We set the image size limit to 6kb, all images below 6kb are inlined, and images higher than 6kb are placed in a separate img folder.

The code is as follows: / / vue.config.jsmodule.exports = {chainWebpack: (config) = > {const imagesRule = config.module.rule ("images") imagesRule .use ('url-loader') .loader (' url-loader') .tap (options = > Object.assign (options, {limit: 6144}))} vue-cli3 Compression Image configuration installs the image-webpack-loader plug-in

1. If you have previously tried to install using yarn or npm, be sure to uninstall it first and then install it with cnpm

Yarn remove image-webpack-loader / / npm uninstall image-webpack-loader

2. Using cnpm to install image-webpack-loader, you will find that it will be installed soon. [funny manually]

Cnpm install-save-dev image-webpack-loader

Note: if you have previously tried to install using yarn or npm, be sure to uninstall the deactivated cnpm installation first.

Configure chainWebpack: config = > {const imagesRule = config.module.rule ('images') imagesRule .use (' image-webpack-loader') .loader ('image-webpack-loader') .options ({bypassOnDebug: true}) .end ()} in vue.config.js

Then it is packaged, and the compression of the picture can be up to more than 60%.

If you download image-webpack-loader directly from the nuxt project, you can achieve the effect without configuration.

This is the end of the content of "the method of picture compression when vue-cli3 is packaged". Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.