The following error will be prompted when webpack4.41.2 package and import less file
Finally, it was found that wepack.config.js There is something missing in the file
Tag Archives: vue.js
Vue project webpack optimization compression webpack plugin open gzip
Abstract:
Starting gzip when packaging can greatly reduce the size of the package, which is very suitable for online deployment. Smaller size for user experience
It means faster loading speed and better user experience.
Vue-cli3.0 project
Installation dependency: compression webpack plugin
npm install compression-webpack-plugin –save-dev
vue.config.js Revision:
const CompressionPlugin = require('compression-webpack-plugin');
constproductionGzipExtensions=/.(js-124css-124json-124txt *)?$/i;
module.exports = {
publicPath: './',
productionSourceMap: false,
configureWebpack: {...},
chainWebpack: config =&> {
config.resolve.alias.set('@', resolve('src'));
if (process.env.NODE_ENV === 'production') {
config.plugin('compressionPlugin')
.use(new CompressionPlugin({
filename: '[path].gz[query]',
algorithm: 'gzip',
test: productionGzipExtensions,
threshold: 10240,
minRatio: 0.8,
deleteOriginalAssets: true
}));
}
},
};Parameter configuration of compression webpack plug in: View on the official website（ https://www.webpackjs.com/plugins/compression-webpack-plugin/ ）
）
Parameter configuration of compression webpack plug in: View on the official website（
Parameter configuration of compression webpack plug in: View on the official website（
gzip on;
gzip_static on;
gzip_min_length 1k;
gzip_buffers 4 32k;
gzip_http_version 1.1;
gzip_comp_level 2;
gzip_types text/plain application/x-javascript text/css application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6].";Gzip use environment: http, server, location, if (x), generally defined in nginx.conf Http { Between
gzip on
on is enabled and off is off
gzip_ min_ length 1k
Set the minimum number of bytes of the page that can be compressed. The number of bytes of the page is obtained from the content length in the header. The default value is 0, no matter how many pages are compressed. It is recommended to set the number of bytes larger than 1K. If the number of bytes is less than 1K, it may increase.
gzip_ buffers 4 16k
How much memory is used to cache compression results?”4 16K” means to get the compression results in 16K * 4
gzip_ comp_ level 5
Gzip compression ratio (1 ~ 9), the smaller the compression effect is, the worse the compression effect is, but the larger the processing speed is, the slower the processing speed is, so the intermediate value is generally taken
gzip_ types text/plain application/x-javascript text/css application/xml text/javascript application/x-httpd-php
Takes effect for specific MIME types, where ‘text/HTML’ is forced to be enabled by the system
gzip_ http_ version 1.1
Identify the version of HTTP protocol. Early browsers may not support gzip self decompression, and users will see garbled code
gzip_ vary on
Enable reply header “vary: accept encoding”
gzip_ proxied off
When nginx is used as a reverse proxy, it is enabled, off (compression of all proxy result data is turned off), expired (compression is enabled, if the header contains “expires” header information), and no cache (compression is enabled, if the header contains “cache” header information)- Control:no-cache “), no store (compression enabled, header header contains” cache “- Control:no-store “), private (compression enabled, The header contains “cache”- Control:private “),no_ last_ Modefied (compression enabled, header header does not contain “last modified”), no_ Etag (enable compression, if header does not contain “Etag” header information), auth (enable compression, if header contains “authorization” header information)
gzip_ disable msie6
Ie5.5 and IE6 SP1 use the msie6 parameter to disable gzip compression) to specify which browsers (which will match with user agents) do not need gzip compression, depending on the PCRE library
Server configuration from juan26 = &> https://segmentfault.com/a/1190000012571492?utm_ source=tag-newest
Note: (gzip)_ Static on) the dynamic compression of nginx is to compress each request first and then output it, which causes the virtual machine to waste a lot of CPU. To solve this problem, we can use the nginx module gzip Precompression, this module is used to directly read the compressed file (file name is plus. GZ) for the file that needs to be compressed, instead of dynamic compression. For the request that does not support gzip, read the original file.
1. Files can be compressed using gzip or any other compatible command.
2.gzip_ Static configuration takes precedence over gzip.
3. Open nginx_ After static, we will first find out whether there is a corresponding GZ file for any file.
4.gzip_ Types setting to gzip_ Static is invalid.
5. Gzip static is applicable to HTTP 1.1 by default.
view the size comparison before and after compression:
Unpack
EnPack
[Vue warn]: You may have an infinite update loop in a component render function
[Vue warn]: You may have an infinite update loop in a component render functionIt’s a strange question. I’ve never met it before. If it’s a project led by myself, it’s easy to do. Just debug it slowly. It happens that I encounter this problem in the company’s project, and the system structure of the company’s project is very complex, and I haven’t fully mastered it. What’s more, it’s very difficult to debug because of the complexity of the system. In addition, there is no testing framework. It’s hard to do
It was 3 o’clock or 4 o’clock in the afternoon when I was hungry. As a result, I fell into a state of hypoglycemia again. It’s a real house leak. It’s rainy and rainy, and the boat is small. I’m so hungry that my brain aches
But I finally got Google + debug. In fact, in the V-for loop, if you use methods or calculated attributes to operate VM. $data’s attributes, in theory, it may cause an infinite loop because you modify the loop object. At this point, Vue will issue a warning (not really infinite loop).
For example, such a component contains a set of buttons implemented with : checked + < label> . It has the following functions:
To be able to group, you need to set their name attributes
In order to control <input> with <label> , you need to set ID for <input>
The button can be deleted
So I chose to do this:
<template>
<div>
<template v-for="(item, index) in items">
<input type="checkbox" :name="'my-component-' + selfIndex" :id="getID">
<label :for="getID(false)">
<button type="button" @click="remove(index)"&>×</button>
</template>
</div>
</template>
<script>
let count = 0;
export default {
data() {
return {
selfIndex: 0,
itemIndex: 0,
}
},
methods: {
getID(increase = true) { // Note that this is where the problem lies
if (increase) {
this.itemIndex++;
}
return `my-component-${this.selfIndex}-${this.itemIndex}`;
},
},
beforeMount() {
this.selfIndex = count;
count++;
}
}
</script>Here, in order to generate a unique ID, I choose to use the vm.itemIndex ++, the problems mentioned above will appear, and there are hidden dangers.
There are two solutions: one is to put itemindex in local variables, so that it is not directly associated with components; the other is to write a global unique ID generating function, and then reference it. The principle is the same. The repetitive part will not be written. After modification, it is generally as follows:
Scheme 1
<script&>
let count = 0;
let itemCount = 0; // Put the element counter here
export default {
methods: {
getID(increase = true) {
if (increase) {
itemCount++;
}
return `my-component-${this.selfIndex}-${itemCount}`;
}
}
};
</script&>Scheme 2
// helper.js get the unique id
let count = 0;
export default function uniqueID(increase = true) {
if (increase) {
count++;
}
return `prefix-${count}`;
}
// Original components
import uniqueID from './helper';
export default {
methods: {
getID(increase = true) {
let id = uniqueID(increase);
return `my-component-${this.selfIndex}-${id}`;
}
}
}