Vue3啟用gzip壓縮nginx配置詳解
更新時間：2023年08月31日 11:18:22 作者：south
這篇文章主要為大家介紹了Vue3啟用gzip壓縮時nginx配置gzip示例詳解詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
Vue CLI3中啟用gzip壓縮
要在Vue CLI3中啟用gzip壓縮，可以使用compression-webpack-plugin插件。
1. 安裝插件：compression-webpack-plugin
在終端中運行以下命令安裝compression-webpack-plugin插件：
npm install --save-dev compression-webpack-plugin
2. 修改配置：vue.config.js
在vue.config.js文件中添加以下代碼：
const CompressionPlugin = require('compression-webpack-plugin');
module.exports = {
configureWebpack: {
plugins: [
new CompressionPlugin({
algorithm: 'gzip', // 使用gzip壓縮
test: /\.js$|\.html$|\.mp4$|\.*$|\.css$/, // 匹配文件名
filename: '[path][base].gz[query]', // 壓縮后的文件名(保持原文件名，后綴加.gz)
minRatio: 1, // 壓縮率小于1才會壓縮
threshold: 10240, // 對超過10k的數(shù)據(jù)壓縮
deleteOriginalAssets: false, // 是否刪除未壓縮的源文件，謹(jǐn)慎設(shè)置，如果希望提供非gzip的資源，可不設(shè)置或者設(shè)置為false（比如刪除打包后的gz后還可以加載到原始資源文件）
})
]
}
}這將在webpack配置中添加compression-webpack-plugin插件，并配置它以壓縮.js，.html和.css文件。
3. 重新構(gòu)建：重新構(gòu)建Vue項目
壓縮后的文件應(yīng)該已經(jīng)生成了。
如果構(gòu)建成功，則在dist目錄下應(yīng)該會看到被壓縮后的文件，例如app.js.gz，app.html.gz等。
編輯 Nginx 配置文件
#開啟gzip壓縮功能 gzip on; gzip_min_length 1024; gzip_buffers 4 16k; gzip_comp_level 2; gzip_types *; gzip_vary on;
以上就是Vue3啟用gzip壓縮nginx配置詳解的詳細(xì)內(nèi)容，更多關(guān)于Vue3 gzip壓縮nginx配置的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
下面小編就為大家分享一篇vue 實現(xiàn)類似淘寶星級評分的示例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
Vue的小伙伴們,困擾大家的IE瀏覽器支持Vue的問題,目前已經(jīng)找到了一個比較好的解決方案,下面這篇文章主要給大家介紹了關(guān)于vue項目兼容IE瀏覽器的教程步驟,需要的朋友可以參考下2023-03-03
本文給大家介紹vue多層彈框時存在遮擋問題，解決思路首先想到的是找到對應(yīng)的遮擋層的css標(biāo)簽，然后修改z-index值，但是本思路只能解決首次問題，再次打開還會存在相同的問題，故該思路錯誤，下面給大家?guī)硪环N正確的思路，一起看看吧2022-03-03
深入理解Vue的插件機(jī)制與install詳細(xì)
這篇文章主要介紹的是深入理解Vue的插件機(jī)制與install，文章主要是講解install函數(shù)可以做些什么、install內(nèi)部是怎么實現(xiàn)的、 Vuex，Vue-Router插件在install期間到底干了什么,需要的小伙伴可以參考一下2021-09-09
這篇文章主要給大家介紹了關(guān)于vue中常見的問題及解決方法的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
這篇文章主要介紹了vue中動態(tài)控制btn的disabled屬性方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue3基于rem比例縮放方案,本縮放方案置于hooks中即可，文中通過示例代碼介紹了vue-cli3 中使用rem布局的方法，需要的朋友可以參考下2023-05-05
如何在 ant 的table中實現(xiàn)圖片的渲染操作
這篇文章主要介紹了如何在 ant 的table中實現(xiàn)圖片的渲染操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
這篇文章主要介紹了vue中如何實現(xiàn)拖拽調(diào)整順序功能問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
這篇文章主要介紹了vue3中如何獲取proxy包裹的數(shù)據(jù)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-05-05