技術標籤：Vuevue

不多說，直接使用外掛解決這個問題！
第一步：先下載這個外掛

npm install --save-dev compression-webpack-plugin

第二步：修改vue.config.js配置檔案，如果沒有vue.config.js，在根目錄自己建立一個，下面是配置檔案的程式碼

const path = require('path');

const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const productionGzipExtensions = ['js', 'css']
const isProduction = process.env.NODE_ENV === 'production'

module.exports = {
  lintOnSave: false,
  runtimeCompiler: true,
  publicPath: './', // 設定打包檔案相對路徑
  // 這是前端解決跨域的程式碼
  devServer: {
    // open: process.platform === 'darwin',
    // host: 'localhost',
    port: 8080,
    // open: true, //配置自動啟動瀏覽器
    proxy: {
      '/api': {
        target: ``,//寫上介面基地址
        changeOrigin: true,
        ws: true,
        // secure: false, //如果是http介面，需要配置此引數
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
  configureWebpack:{
    resolve:{
      alias:{
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      } 
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      
      // 下面是下載的外掛的配置
      new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  }
}
 

這裡問題基本上就解決了，本人之前做的專案是放在Nginx伺服器的，Nginx伺服器也要有相應的配置

server{
    listen 8087;
    server_name localhost;

    gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable "MSIE [1-6]\.";
}
 

最後，看一下打包的效果

我們可以看到，現在打包生成的是成對的檔案，一個是JS，一個是壓縮的，當專案部署到伺服器的時候，頁面載入的就是壓縮的檔案。
注：如果真的需要特別快的載入速度，更直接的辦法就是加大伺服器頻寬