gpt4 book ai didi

javascript - 带有 webpack 的 Vue.js 不提供压缩的 GZIP .js 文件

转载 作者:行者123 更新时间:2023-12-01 15:42:06 26 4
gpt4 key购买 nike

我的服务器不向客户端提供 GZIPd JavaScript 文件。

我有一个简单的 Vue.js 应用程序,托管在 Heroku 上。当我在控制台中通过“npm run build”构建站点时,它会为/dist/js 目录填充每个 JavaScript 文件的 4 个文件,正如我所期望的那样。

例如:

chunk-vendors.e26db277.js
chunk-vendors.e26db277.js.gz
chunk-vendors.e26db277.js.map
chunk-vendors.e26db277.js.map.gz

为了启用压缩,我使用以下命令安装了 webpack:
    npm install --save-dev compression-webpack-plugin

然后我设置我的 vue.config.js 到以下:
    const CompressionPlugin = require('compression-webpack-plugin');

module.exports = {
chainWebpack(config) {
config.plugins.delete('prefetch');


config.plugin('CompressionPlugin').use(CompressionPlugin);
}
};

基本上我遵循了这个教程:
https://medium.com/@aetherus.zhou/vue-cli-3-performance-optimization-55316dcd491c

当我在浏览器中检查 HTTP 请求时,它说它接受 gzip:
Accept-Encoding: gzip, deflate, br

我卡住的地方是,让服务器实际交付 .gz 文件。

在教程中它说“这样一个静态网站的服务器 block 看起来像这样:
    server {
listen 80;
server_name www.example.io;
root /path/to/the/directory;
index index.html;
gzip_static on;

location /index.html {
etag on;
}
location / {
etag off;
add_header Cache-Control max-age=315360000, immutable;
}
}

但是我在哪里可以找到这个 block ?

这是我的 server.js:
const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

const app = express()

//here we are configuring dist to serve app files
app.use('/', serveStatic(path.join(__dirname, '/dist')))

// this * route is to serve project on different page routes except root `/`
app.get(/.*/, function (req, res) {
res.sendFile(path.join(__dirname, '/dist/index.html'))
})

const port = process.env.PORT || 8080;
app.listen(port);

最佳答案

服务器 block 是 NGINX 的典范。

使用 express 时,必须安装 Node.js 压缩中间件。

例如:

$ npm install compression

Server js 必须调整如下:
const compression = require('compression') // <-- import this library
const express = require('express')
const serveStatic = require('serve-static')
const path = require('path')

const app = express()

// use compression
app.use(compression()) // <-- use the library
[...]

关于javascript - 带有 webpack 的 Vue.js 不提供压缩的 GZIP .js 文件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62150597/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com