vuejs 2.x；gzip文件压缩 compression-webpack-plugin；可视化资源分析webpack-bundle-analyzer；splitChunks分包；
let pluginValue = [];
if (process.env.VUE_DORP_DEBUGGER === "true") {
const BundleAnalyzerPlugin =
require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
const TerserPlugin = require("terser-webpack-plugin");
const CompressionPlugin = require("compression-webpack-plugin");
pluginValue = [
new TerserPlugin({
terserOptions: {
compress: {
drop_console: true,
drop_debugger: true,
},
},
}),
// 性能分析
new BundleAnalyzerPlugin(),
// gzip 文件压缩
new CompressionPlugin({
test: /\.js$|\.html$|\.css$|\.jpg$|\.jpeg$|\.png/, // 需要压缩的文件类型
threshold: 10240, // 归档需要进行压缩的文件大小最小值 10k
deleteOriginalAssets: false, // 是否删除原文件
}),
];
}
module.exports = {
publicPath: "./",
lintOnSave: false,
configureWebpack: {
plugins: pluginValue,
},
chainWebpack(config) {
config.optimization.splitChunks({
chunks: "all",
minSize: 30000,
maxSize: 0,
maxAsyncRequests: 6, // 每个异步加载模块最多能被拆分的数量
maxInitialRequests: 6, // 每个入口和它的同步依赖最多能被拆分的数量
cacheGroups: {
vendors: {
name: "chunk-vendors",
test: /[\\/]node_modules[\\/]/,
priority: -10,
chunks: "all",
},
common: {
name: "chunk-common",
minChunks: 2,
priority: -20,
chunks: "initial",
reuseExistingChunk: true,
},
"element-ui": {
name: "element-ui",
test: /[\\/]element-ui[\\/]/,
chunks: "all",
priority: 0,
},
"element-ui/lib/utils": {
name: "element-ui-utils",
test: /[\\/]element-ui[\\/]lib[\\/]utils/,
chunks: "all",
priority: 1,
},
"element-ui/lib/table.js": {
name: "element-ui-tablejs",
test: /[\\/]element-ui[\\/]lib[\\/]table.js/,
chunks: "all",
priority: 1,
},
"element-ui/lib/tree.js": {
name: "element-ui-treejs",
test: /[\\/]element-ui[\\/]lib[\\/]tree.js/,
chunks: "all",
priority: 1,
},
"element-ui/lib/select.js": {
name: "element-ui-selectjs",
test: /[\\/]element-ui[\\/]lib[\\/]select.js/,
chunks: "all",
priority: 1,
},
echarts: {
name: "echarts",
test: /[\\/]echarts[\\/]/,
chunks: "all",
priority: 0,
},
zrender: {
name: "zrender",
test: /[\\/]zrender[\\/]/,
chunks: "all",
priority: 0,
},
vue: {
name: "vue",
test: /[\\/]vue[\\/]/,
chunks: "all",
priority: 0,
},
sortablejs: {
name: "sortablejs",
test: /[\\/]sortablejs[\\/]/,
chunks: "all",
priority: 0,
},
"decimal.js": {
name: "decimaljs",
test: /[\\/]decimal.js[\\/]/,
chunks: "all",
priority: 0,
},
},
});
},
// productionSourceMap: true,
devServer: {
// https
https: false,
// 主机名
host: "0.0.0.0",
// 端口号
port: 8890,
// 自动打开浏览器
// open: true,
// 跨域
proxy: {
"/dev": {
target: "http://XXX",
changeOrigin: true,
pathRewrite: {
"^/dev": "/",
},
},
},
},
};
nginx 配置 gizp
gzip on; # 开启gzip压缩
gzip_static on; #开启gzip静态压缩功能（会直接使用前端代码打包构建时，自动压缩代码成gz文件）
gzip_min_length 4k; # 小于4k的文件不会被压缩，大于4k的文件才会去压缩
gzip_buffers 16 8k; # 处理请求压缩的缓冲区数量和大小，比如8k为单位申请16倍内存空间；使用默认即可，不用修改
gzip_http_version 1.1; # 早期版本http不支持，指定默认兼容，不用修改
gzip_comp_level 2; # gzip 压缩级别，1-9，理论上数字越大压缩的越好，也越占用CPU时间。实际上超过2的再压缩，只能压缩一点点了，但是cpu确是有点浪费。因为2就够用了
gzip_types text/plain application/x-javascript application/javascript text/javascript text/css application/xml application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/x-woff font/ttf; # 压缩的文件类型 MIME类型
gzip_vary on; # 是否在http header中添加Vary: Accept-Encoding，一般情况下建议开启
开启gzip_static on; #开启gzip静态压缩功能报错：unknown directive “gzip_static”
执行 nginx -t 命令，检查nginx配置文件是否正确，报错信息如下
[root@localhost sbin]# ./nginx -c /usr/local/nginx/conf/nginx.conf
nginx: [emerg] unknown directive “gzip_static” in /usr/local/nginx/conf/nginx.conf:46
原因是nginx缺少gzip_static模块，给现有nginx添加模块：
进入nginx安装目录同级目录，执行./nginx -V 查看当前Nginx已编译的模块，看到的可能是如下内容
$ ./nginx -V
nginx version: nginx/1.19.6
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC)
built with OpenSSL 1.0.2k-fips 26 Jan 2017
TLS SNI support enabled
configure arguments: --prefix=/opt/nginx/ --user=www --group=www --prefix=/opt/nginx/ --with-http_ssl_module --with-http_stub_status_module
很简单，把原来的arguments拷贝过来，增加–with-http_gzip_static_module即可，执行命令如下:
./configure --prefix=/opt/nginx/ --user=www --group=www --prefix=/opt/nginx/ --with-http_ssl_module --with-http_stub_status_module --with-http_gzip_static_module
执行make，千万不要 make&install，如果直接执行install会直接替换，make命令执行完成之后在编译目录objs文件下面有个nginx执行文件，此时我们把原来的sbin目录下nginx执行文件备份一下，将新编译的nginx二进制文件拷贝到原执行文件的位置
cd /usr/local/nginx/sbin
mv nginx nginx.xxxxxx
cp ../nginx-1.19.6/objs/nginx .
我们看一下新的编译文件模块信息，已经包含了新的模块
./nginx -V
nginx version: nginx/1.19.6
built by gcc 4.8.5 20150623 (Red Hat 4.8.5-39) (GCC)
built with OpenSSL 1.0.2k-fips 26 Jan 2017
TLS SNI support enabled
configure arguments: --prefix=/opt/nginx/ --user=www --group=www --prefix=/opt/nginx/ --with-http_ssl_module --with-http_stub_status_module --with-http_gzip_static_module
执行 nginx -s reload 重启nginx即可
执行make 时报错：error: this statement may fall through [-Werror=implicit-fallthrough=] h ^= data[2] ＜＜ 16；
cd /root/nginx-1.19.6/objs
vim Makefile
需要把 vim Makefile 的下面这句话的 “-Werror” 删除，再执行 make 就可以了
CFLAGS = -pipe -O -W -Wall -Wpointer-arith -Wno-unused -Werror -g -I../nginx-http-flv-module