之前做了一個(gè)vue-cli2的vue2項(xiàng)目，一切都OK回溺，唯獨(dú)部署后，首次加載特別慢混萝。
查看了谷歌Network遗遵，發(fā)現(xiàn)有多個(gè)js和css文件特別大，大概區(qū)間在2Mb~8Mb之間逸嘀。加載時(shí)間是2s到9s车要。
針對(duì)這個(gè)問(wèn)題，深入探索了很多博客崭倘。
因?yàn)榫W(wǎng)絡(luò)上的相關(guān)文檔翼岁，相關(guān)的內(nèi)容比較混亂，比如司光，腳手架的版本不對(duì)應(yīng)導(dǎo)致的相關(guān)配置無(wú)法使用琅坡，我在這里只講解cli4的配置。

解決方向残家，主要如下榆俺。

0.chunk-vendors.js配置（重要）

打包后chunk-vendors.js文件大，需要查看main.js文件，所有引入的包茴晋。

1 UI框架：ElementUI陪捷，IView，Ant等诺擅，一定按需引入市袖。
2 非全局的，引入到vue文件中掀虎，不要做全局凌盯。
3 低效的，去除烹玉。

1.vue.config.js配置

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
module.exports = {
  productionSourceMap: !IS_PROD, // 生產(chǎn)環(huán)境的 source map
}

打包時(shí)配置productionSourceMap：false驰怎。剔除項(xiàng)目文件中map文件

2.vue-router 路由懶加載

{
  path:'/singleTransverseBenchmark',
  component: r => require.ensure([], () => r(require('@views/benchmarkingSys/singleTransverseBenchmark')), 'lanRouter1')
},

根據(jù)項(xiàng)目模塊進(jìn)行設(shè)置，lanRouter1名稱一樣的會(huì)被打包進(jìn)入一個(gè)文件二打，該vue關(guān)聯(lián)的js和css都會(huì)按照這樣的機(jī)制運(yùn)行县忌。

3.使用CDN減小代碼體積

網(wǎng)絡(luò)上有很多相關(guān)的資料。我的項(xiàng)目沒(méi)有更改這塊继效，因此如果小伙伴們有需要症杏，可以自行搜索配置。

4.測(cè)試的插件剔除

測(cè)試的插件如果無(wú)用瑞信，一定要剔除厉颤，不要留在項(xiàng)目中。

5.去掉 console.log

npm i uglifyjs-webpack-plugin -D

const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 console.log
module.exports = {
configureWebpack: config => {
    if (IS_PROD) {
      // 去掉console.log
      const plugins1 = [];
      plugins1.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      config.plugins = [...config.plugins, ...plugins1];
    }
  },
}

6.壓縮圖片

npm i -D image-webpack-loader

module.exports = {
  chainWebpack: config => {
    // 壓縮圖片
    if (IS_PROD) {
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false }
          // webp: { quality: 75 }
        });
    }
  },
}

7.配置gzip凡简，升級(jí)Zopfli（效率更高）

gzip：
npm i -D compression-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({
          filename: "[path].gz[query]",
          algorithm: "gzip",
          test: productionGzipExtensions,
          threshold: 10240,
          minRatio: 0.8
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  }
};

Zopfli：
npm i -D @gfx/zopfli brotli-webpack-plugin

const CompressionWebpackPlugin = require("compression-webpack-plugin");
const zopfli = require("@gfx/zopfli");
const BrotliPlugin = require("brotli-webpack-plugin");

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;

module.exports = {
  configureWebpack: config => {
    const plugins = [];
    if (IS_PROD) {
      plugins.push(
        new CompressionWebpackPlugin({
          algorithm(input, compressionOptions, callback) {
            return zopfli.gzip(input, compressionOptions, callback);
          },
          compressionOptions: {
            numiterations: 15
          },
          minRatio: 0.99,
          test: productionGzipExtensions
        })
      );
      plugins.push(
        new BrotliPlugin({
          test: productionGzipExtensions,
          minRatio: 0.99
        })
      );
    }
    config.plugins = [...config.plugins, ...plugins];
  }
};

配置nginx.conf

http {
    ........
    # GZip
    gzip  on;
    gzip_types text/plain application/x-javascript application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;

    server {
    ........

配置過(guò)程中逼友，遇到的問(wèn)題，具體已經(jīng)記不得問(wèn)題詳情了秤涩，但是基本上有一個(gè)特點(diǎn)帜乞，都很奇特，解決辦法如下筐眷，（以下方法黎烈，在你最沒(méi)辦法的時(shí)候可以嘗試使用）

1.刪掉所有node_modules，重新npm install

2.npm安裝插件總是失敗匀谣，可以嘗試cnpm

3.有一些插件需要匹配的基礎(chǔ)插件的版本才能夠正常運(yùn)行照棋。如compression-webpack-plugin需要webpack4+版，但是cli4內(nèi)置的webpack版本似乎不夠（也可能是我升級(jí)cli的后遺癥武翎，不確定原因）烈炭，于是需要安裝webpack，這時(shí)候會(huì)發(fā)現(xiàn)webpack和webpack-cli需要同時(shí)安裝后频，但是安裝后梳庆，又發(fā)現(xiàn)報(bào)錯(cuò)暖途，研究好久，發(fā)現(xiàn)webpack版本太高膏执，我安裝的是5+驻售，需要降版本。然后又發(fā)現(xiàn)總有一個(gè)奇怪的錯(cuò)更米，原來(lái)是compression-webpack-plugin版本高了欺栗，降版本！Ｕ髀汀迟几！

最終的vue.config.js

// vue.config.js
const path = require('path');
const CompressionWebpackPlugin = require("compression-webpack-plugin");
const zopfli = require("@gfx/zopfli");
const BrotliPlugin = require("brotli-webpack-plugin");

const IS_PROD = ["production", "prod"].includes(process.env.NODE_ENV);
const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i;
const resolve = (dir) => path.join(__dirname, dir);
const UglifyJsPlugin = require("uglifyjs-webpack-plugin"); // 去掉 console.log
// const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin; 
// const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
  publicPath: "./", // 默認(rèn)'/'，部署應(yīng)用包時(shí)的基本 URL
  indexPath: 'index.html', // 相對(duì)于打包路徑index.html的路徑
  outputDir: 'dist', // 'dist', 生產(chǎn)環(huán)境構(gòu)建文件的目錄
  assetsDir: 'static', // 相對(duì)于outputDir的靜態(tài)資源(js栏笆、css类腮、img、fonts)目錄
  lintOnSave: false, // 是否在開發(fā)環(huán)境下通過(guò) eslint-loader 在每次保存時(shí) lint 代碼
  runtimeCompiler: true, // 是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本
  productionSourceMap: !IS_PROD, // 生產(chǎn)環(huán)境的 source map
  devServer: {
    open: true, // 是否打開瀏覽器
  },
  chainWebpack: config => {
    config.resolve.symlinks(true); // 修復(fù)熱更新失效
    // 添加別名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@api', resolve('src/api'))
      .set('@tools', resolve('src/tools'))
      .set('@assets', resolve('src/assets'))
      .set('@components', resolve('src/components'))
      .set('@views', resolve('src/views'))
      .set('@router', resolve('src/router'))
      .set('@store', resolve('src/store'))
      .set('@jsonData', resolve('src/jsonData'));
    // 壓縮圖片
    if (IS_PROD) {
      config.module
        .rule("images")
        .use("image-webpack-loader")
        .loader("image-webpack-loader")
        .options({
          mozjpeg: { progressive: true, quality: 65 },
          optipng: { enabled: false },
          pngquant: { quality: [0.65, 0.9], speed: 4 },
          gifsicle: { interlaced: false }
          // webp: { quality: 75 }
        });
    }
    // 展示打包圖形化信息蛉加，會(huì)打開一個(gè)html頁(yè)面蚜枢，幫助自己分析哪些文件過(guò)大，可針對(duì)其進(jìn)行優(yōu)化针饥，上線前 注釋掉
    // config
    //   .plugin('webpack-bundle-analyzer')
    //   .use(BundleAnalyzerPlugin);

    // 抽離 css 支持按需加載 - 暫無(wú)看到效果
    // config.plugin('mini-css-extract-plugin')
    //   .use(require('mini-css-extract-plugin'), [{
    //     filename: 'static/css/[name].[contenthash].css',
    //     chunkFilename: 'static/css/[id].[contenthash].css'
    //   }]).end();
  },
  // 全局樣式配置
  css: {
    loaderOptions: {
      sass: {
        prependData: `@import "./src/assets/css/default";`,
      },
    },
  },
  configureWebpack: config => {
    if (IS_PROD) {
      // 去掉console.log
      const plugins1 = [];
      plugins1.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              drop_console: true,
              drop_debugger: false,
              pure_funcs: ["console.log"] //移除console
            }
          },
          sourceMap: false,
          parallel: true
        })
      );
      // Zopfli
      const plugins2 = [];
      if (IS_PROD) {
        plugins2.push(
          new CompressionWebpackPlugin({
            algorithm(input, compressionOptions, callback) {
              return zopfli.gzip(input, compressionOptions, callback);
            },
            compressionOptions: {
              numiterations: 15
            },
            minRatio: 0.99,
            test: productionGzipExtensions
          })
        );
        plugins2.push(
          new BrotliPlugin({
            test: productionGzipExtensions,
            minRatio: 0.99
          })
        );
      }
      config.plugins = [...config.plugins, ...plugins1, ...plugins2];
    }
  },
  // 
  pages: {
    index: {
      // page 的入口
      entry: 'src/main.js',
      // 模板來(lái)源
      template: 'public/index.html',
      // 在 dist/index.html 的輸出
      filename: 'index.html',
      // 當(dāng)使用 title 選項(xiàng)時(shí)厂抽，
      // template 中的 title 標(biāo)簽需要是 <title><%= htmlWebpackPlugin.options.title %></title>
      title: 'vue-cli4標(biāo)準(zhǔn)框架模版',
      // 在這個(gè)頁(yè)面中包含的塊，默認(rèn)情況下會(huì)包含
      // 提取出來(lái)的通用 chunk 和 vendor chunk丁眼。
      chunks: ['chunk-vendors', 'chunk-common', 'index']
    },
  },

}

package.json:(自行進(jìn)入對(duì)照版本)

{
  "name": "cli4-base",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve && webpack-dev-server --open",
    "dev": "vue-cli-service build --mode development",
    "test": "vue-cli-service build --mode test",
    "build": "vue-cli-service build",
    "webpack": "webpack --version"
  },
  "dependencies": {
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "crypto-js": "^4.0.0",
    "echarts": "^5.1.0",
    "element-ui": "^2.15.1",
    "vue": "^2.6.11",
    "vue-json-excel": "^0.3.0",
    "vue-router": "^3.2.0",
    "vuescroll": "^4.17.3",
    "vuex": "^3.4.0"
  },
  "devDependencies": {
    "@gfx/zopfli": "^1.0.15",
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-router": "~4.5.0",
    "@vue/cli-plugin-vuex": "~4.5.0",
    "@vue/cli-service": "~4.5.0",
    "babel-plugin-component": "^1.1.1",
    "brotli-webpack-plugin": "^1.1.0",
    "compression-webpack-plugin": "^3.1.0",
    "image-webpack-loader": "^7.0.1",
    "sass": "^1.26.5",
    "sass-loader": "^8.0.2",
    "uglifyjs-webpack-plugin": "^2.2.0",
    "vue-template-compiler": "^2.6.11",
    "webpack": "^4.44.2",
    "webpack-cli": "^4.7.0",
    "webpack-dev-server": "^3.11.2"
  }
}

持續(xù)跟新筷凤，把學(xué)到的新東西，親自測(cè)試后補(bǔ)充上來(lái)苞七。
轉(zhuǎn)可以藐守，請(qǐng)注明出處。