vue-cli3.0之配置productionGzip方式

更新時間：2023年05月22日 14:36:31 作者：xiaofei0627

這篇文章主要介紹了vue-cli3.0之配置productionGzip方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vue-cli3.0配置productionGzip

最近沒事升級項目到vue-cli3.0，發(fā)現(xiàn)沒有了productionGzip配置，于是查了一下資料，解決方案如下：

提示：本文compression-webpack-plugin的版本號是2.0.0，3.0.0的話看文章內(nèi)小提示

1.安裝如下插件

npm i -D compression-webpack-plugin

2.在文件vue.config.js里導(dǎo)入compression-webpack-plugin，并添加壓縮文件類型

const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']

3.在configureWebpack 里配置如下代碼

a.簡單方式

? ?configureWebpack: {
? ? ? ? plugins: [
? ? ? ? ? ? new CompressionWebpackPlugin({
? ? ? ? ? ? ? ? asset: '[path].gz[query]', ? // 提示compression-webpack-plugin@3.0.0的話asset改為filename
? ? ? ? ? ? ? ? algorithm: 'gzip',
? ? ? ? ? ? ? ? test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
? ? ? ? ? ? ? ? threshold: 10240,
? ? ? ? ? ? ? ? minRatio: 0.8
? ? ? ? ? ? })
? ? ? ? ]
? ? },

b.高級方式

? ? configureWebpack: config => {
? ? ? ? if (process.env.NODE_ENV === 'production') {
? ? ? ? ? ? // 生產(chǎn)環(huán)境
? ? ? ? ? ? config.plugins.push(
? ? ? ? ? ? ? ? new CompressionWebpackPlugin({
? ? ? ? ? ? ? ? ? ? asset: '[path].gz[query]', // 提示示compression-webpack-plugin@3.0.0的話asset改為filename
? ? ? ? ? ? ? ? ? ? algorithm: 'gzip',
? ? ? ? ? ? ? ? ? ? test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
? ? ? ? ? ? ? ? ? ? threshold: 10240,
? ? ? ? ? ? ? ? ? ? minRatio: 0.8
? ? ? ? ? ? ? ? })
? ? ? ? ? ? );
? ? ? ? } else {
? ? ? ? ? ? // 開發(fā)環(huán)境
? ? ? ? }
? ? },

?? ?// 配置參數(shù)詳解 ??
?? ?// 提示 compression-webpack-plugin@3.0.0的話asset改為filename
?? ?asset： 目標(biāo)資源名稱。 [file] 會被替換成原始資源。[path] 會被替換成原始資源的路徑， [query] 會被替換成查詢字符串。默認(rèn)值是 "[path].gz[query]"。
?? ?algorithm： 可以是 function(buf, callback) 或者字符串。對于字符串來說依照 zlib 的算法(或者 zopfli 的算法)。默認(rèn)值是 "gzip"。
?? ?test： 所有匹配該正則的資源都會被處理。默認(rèn)值是全部資源。
?? ?threshold： 只有大小大于該值的資源會被處理。單位是 bytes。默認(rèn)值是 0。
?? ?minRatio： 只有壓縮率小于這個值的資源才會被處理。默認(rèn)值是 0.8。

4.然后運行 npm run build 完成

5.附完整vue.config.js配置代碼

const path = require('path');
function resolve(dir) {
? ? return path.join(__dirname, dir)
}
// 導(dǎo)入compression-webpack-plugin
const CompressionWebpackPlugin = require('compression-webpack-plugin')
// 定義壓縮文件類型
const productionGzipExtensions = ['js', 'css']
module.exports = {
? ? baseUrl: "/",
? ? // 輸出目錄
? ? outputDir: 'dist', ?
? ? lintOnSave: true,
? ? // 是否為生產(chǎn)環(huán)境構(gòu)建生成 source map？
? ? productionSourceMap: false,
? ? // alias 配置
? ? chainWebpack: (config) => {
? ? ? ? config.resolve.alias
? ? ? ? ? ? .set('@', resolve('src'))
? ? },
? ? // 簡單的方式
? ? // configureWebpack: {
? ? // ? ? plugins: [
? ? // ? ? ? ? new CompressionWebpackPlugin({
? ? // ? ? ? ? ? ? asset: '[path].gz[query]', // 提示 compression-webpack-plugin@3.0.0的話asset改為filename
? ? // ? ? ? ? ? ? algorithm: 'gzip',
? ? // ? ? ? ? ? ? test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
? ? // ? ? ? ? ? ? threshold: 10240,
? ? // ? ? ? ? ? ? minRatio: 0.8
? ? // ? ? ? ? })
? ? // ? ? ]
? ? // },
? ? // 高級的方式
? ? configureWebpack: config => {
? ? ? ? if (process.env.NODE_ENV === 'production') {
? ? ? ? ? ? // 生產(chǎn)環(huán)境
? ? ? ? ? ? config.plugins.push(
? ? ? ? ? ? ? ? new CompressionWebpackPlugin({
? ? ? ? ? ? ? ? ? ? asset: '[path].gz[query]', ?// 提示 compression-webpack-plugin@3.0.0的話asset改為filename
? ? ? ? ? ? ? ? ? ? algorithm: 'gzip',
? ? ? ? ? ? ? ? ? ? test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
? ? ? ? ? ? ? ? ? ? threshold: 10240,
? ? ? ? ? ? ? ? ? ? minRatio: 0.8
? ? ? ? ? ? ? ? })
? ? ? ? ? ? );
? ? ? ? } else {
? ? ? ? ? ? // 開發(fā)環(huán)境
? ? ? ? }
? ? },
? ? // CSS 相關(guān)選項
? ? css: {
? ? ? ? extract: true,
? ? ? ? // 是否開啟 CSS source map？
? ? ? ? sourceMap: false,
? ? ? ? // 為預(yù)處理器的 loader 傳遞自定義選項。比如傳遞給
? ? ? ? // sass-loader 時，使用 `{ sass: { ... } }`。
? ? ? ? loaderOptions: {}, // 為所有的 CSS 及其預(yù)處理文件開啟 CSS Modules。
? ? ? ? modules: false
? ? },
? ? // 在多核機器下會默認(rèn)開啟。
? ? parallel: require('os').cpus().length > 1,
? ? // PWA 插件的選項。 ??
? ? pwa: {},
? ? // 配置 webpack-dev-server 行為。
? ? devServer: {
? ? ? ? open: process.env.NODE_ENV === "development",
? ? ? ? host: 'localhost',
? ? ? ? port: 8888,
? ? ? ? https: true,
? ? ? ? hotOnly: false,
? ? ? ? open: true,
? ? ? ? proxy: '', // string | Object
? ? ? ? before: app => {}
? ? },
? ? // 第三方插件的選項
? ? pluginOptions: {}
}

vue3.0配置gzip 及資源404

第一步：vue.config.js

    plugins: [
      new CompressionPlugin({
        test:productionGzipExtensions, //匹配文件名
        threshold: 10240,//對超過10k的數(shù)據(jù)壓縮
        deleteOriginalAssets: true //不刪除源文件
      })
    ],

打包效果

第二步：這里使用 nginx 進行配置

這里遇到了小問題：

deleteOriginalAssets: true //不刪除源文件為true時，頁面加載資源呈404，需要配置nginx開啟打包靜態(tài)文件

nginx.conf
   gzip  on;
	gzip_static on; # 開啟靜態(tài)文件壓縮
    gzip_min_length  1k; # 不壓縮臨界值，大于1K的才壓縮
    gzip_buffers     4 16k;
    gzip_http_version 1.1;
    gzip_comp_level 2;
    gzip_types     text/plain application/javascript application/x-javascript text/javascript text/css application/xml application/xml+rss; # #進行壓縮的文件類型
    gzip_vary on;
    gzip_proxied   expired no-cache no-store private auth;
    gzip_disable   "MSIE [1-6]\.";

開啟Nginx gzip壓縮非常簡單，達到的效果可以壓縮靜態(tài)文件大小、提高頁面訪問速度、節(jié)省流量和帶寬是很有幫助的，也為用戶省去了很多流量；唯一的不足就是開啟之后服務(wù)器這邊會增加運算，進行壓縮運算處理，就比如壓縮級別，服務(wù)器cpu會有開銷。

請求正常：