vue cli3開啓gzip，nginx配置直接使用已經壓縮好的文件(文件名爲加.gz)
上面會提示當前安裝版本與當前項目下的webpack版本使用不匹配，需要安裝對應的版本
(6)後臺取compression-webpack-plugin官網看了一下歷史版本，取了一個較低版本試了試。
果然是版本衝突
執行 >npm install --save-dev [email protected]
然後打包成功。
擼了今年阿里、騰訊和美團的面試，我有一個重要發現.......>>
前言：vue cli3的性能優化裏面，開啓gzip能得到很多的收益。通過webpack插件compression-webpack-plugin可以在打包的時候生成.gz文件；當用nginx做服務器時，nginx通過_gzip on;_配置可對每個請求先壓縮再輸出，這樣造成虛擬機浪費了很多cpu；而且webpack打包時已經生成了壓縮文件，完全沒必要重新通過nginx再壓縮一下。發現這個問題後，通過半天的資料查詢找到了答案：**nginx gzip static靜態壓縮，**下面把我解決的過程記錄一下。
一、配置vue cli3 gzip
const CompressionWebpackPlugin = require('compression-webpack-plugin')
module.exports = {
configureWebpack: config => {
// 開發環境不需要gzip
if (process.env.NODE_ENV !== 'production') return
config.plugins.push(
new CompressionWebpackPlugin({
// 正在匹配需要壓縮的文件後綴
test: /\.(js|css|svg|woff|ttf|json|html)$/,
// 大於10kb的會壓縮
threshold: 10240
// 其餘配置查看compression-webpack-plugin
})
)
}
}
二、安裝nginx ngx_http_gzip_module模塊
-
先下載nginx
-
cd /nginx解壓目錄
-
./configure --prefix=/usr/local/nginx --with-http_gzip_static_module
-
上面的/usr/local/nginx爲nginx安裝目錄，可根據自己喜好修改
-
make
-
make install
三、配置nginx
找到/usr/local/nginx/conf/nginx.conf，並添加下面代碼
server {
listen 4300;
server_name localhost;
location / {
root /home/static/web/wechat;
index /index.html;
try_files $uri $uri/ /index.html;
gzip_static on; #靜態壓縮
}
}
啓動nginx服務：./nginx -c /usr/local/nginx/conf/nginx.conf
四、查看效果
1.打包後文件
2. 瀏覽器訪問資源結果
