項目級，Vue-cli3+node多頁面配置+性能優化

前言

對於vue多頁面配置，能夠說cli2-cli3，是一個從0到1的過程，想起cli2的不堪回首，cli3是香的不是一丁半點；雖然cli3自己提供了pages多頁面的入口配置，可是想要靈活的根據配置去適應結構，仍是須要一些操做，避免後期不停的修改；本文就配合node作一個靈活配置以及設置一些剛需的配置加性能優化。

建立項目

• 操做方式

  vue create xxx
  ... ...
  選擇配置（非路由模式）
  ... ...
  建立完成
  複製代碼

• 項目結構

分析vue.config.js

• 初始代碼

  module.exports = {
  lintOnSave: false
  }
  複製代碼

• 官網多頁面配置代碼

  module.exports = {
  pages: {
   index: {
   // page 的入口
   entry: 'src/index/main.js',
   // 模板來源
   template: 'public/index.html',
   // 在 dist/index.html 的輸出
   filename: 'index.html',
   // 當使用 title 選項時，
   // template 中的 title 標籤須要是 <title><%= htmlWebpackPlugin.options.title %></title>
   title: 'Index Page',
   // 在這個頁面中包含的塊，默認狀況下會包含
   // 提取出來的通用 chunk 和 vendor chunk。
   chunks: ['chunk-vendors', 'chunk-common', 'index']
   },
   // 當使用只有入口的字符串格式時，
   // 模板會被推導爲 `public/subpage.html`
   // 而且若是找不到的話，就回退到 `public/index.html`。
   // 輸出文件名會被推導爲 `subpage.html`。
   subpage: 'src/subpage/main.js'
   }
  }
  複製代碼

修改前分析

• 首先咱們從官網提供的代碼得出一個結論，那就是多頁面其實就是一個統一入口的list，因此當有了新增頁面的需求，爲了避免人工去修改添加list的數據信息，咱們須要把這一塊腳本化；
• 其次從第一條來看，多頁面的結構和初始化的結構是不一致的，因此咱們第一步先要修改整個模板的渲染結構，作增刪處理，固然刪不是剛需，但冗餘的結構將毫無心義；

修改-調整結構

1.可清空public文件夾、刪除main.js和app.vue等其餘非核心冗餘文件
 2.src增長模板入口文件夾，名字隨意，原本是用pages爲入口文件夾，結構以下
複製代碼

修改-編寫多頁面配置邏輯

上面結構已經搭建好了，咱們接下來調整邏輯，首先我們先定好步驟；

第一步，怎麼靈活？方案：將list用腳本讀取配置；
  第二部，怎麼讀取？方案：利用node的fs讀取文件夾信息做爲入口配置信息
複製代碼

方案有了，下面咱們直接調整；

// -----------------------------pages config----------------------------------
  const fs = require('fs')
  let pages = {}
  const _configPages = async function () {
    await fs.readdirSync('./src/pages/').forEach((val) => {
     pages[val] = {
     // page entry
     entry: `src/pages/${val}/index.js`,
     // 模板來源
     template: `src/pages/${val}/index.html`,
     // 在 dist/index.html 的輸出
    filename: `${val}.html`
     }
   })
  }
   _configPages('./src/pages/') // readdirSync
   module.exports = {
     pages: pages // more pages config
   }
複製代碼

注：打完收工，你們注意到惟一的key，就是每個模板文件夾名稱，裏面的文件名稱無需變動，因此每次添加一個頁面，只須要從新run就能夠了~

性能優化之gzip優化

首先說明一點的事，開啓gzip，在最直觀的感受中，會佔用服務端的帶寬資源，可是相對於大文件的損耗，仍是很值得的，並且目前主流的雲cdn，默認開啓gzip，因此提早gzip，每每是提升性能的最佳方式。
  
  走一個configureWebpack，簡單暴力
  compression-webpack-plugin
  
  const CompressionWebpackPlugin = require('compression-webpack-plugin')
  const gzipSourceList = ['css', 'js']
  module.exports = {
    configureWebpack: config => { // open gzip
       if (process.env.NODE_ENV === 'production') {
       config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
       return {
         plugins: [
         new CompressionWebpackPlugin({
          filename: '[path].gz[query]', // 目標資源文件名稱
          algorithm: 'gzip',
          test: new RegExp(
          '\\.(' + gzipSourceList.join('|') + ')$'
           ), // 匹配全部對應的文件
          threshold: 10240, // 多少kb 配置10kb
          minRatio: 0.8, // 壓縮比例
         deleteOriginalAssets: false // 是否刪除原始資源
          })
       ]
       }
     }
    }
  }
複製代碼

其他剛需配置

module.exports = {
    publicPath: '/[name]/', // 根目錄 | 「/」 建議制定
    outputDir: './dist/[name]/', // build path 打包輸出路徑
    productionSourceMap: false, // don·t use map 不要把源暴露出去
    devServer: {
     port: 1314, // port
     open: true, // default browser 主動打開默認瀏覽器
     overlay: { // 報錯展現
      warnings: true, // eslint show warnings
      errors: true // eslint show errors
     }
   }
 }
複製代碼

結構拓展

爲了使開發中高度靈活，因此一些fetch以及公共文件區域仍是要預留出來的，結構以下~

• fetch-index入口

  import axios from 'axios'
    import qs from 'qs'
    
    function fetch (type, prefix, url, params, status) {
      return new Promise((resolve, reject) => {
        let postParams = {}
        const instance = axios.create({
          timeout: 100000
        })
        postParams = params
        let fetchData = {
          method: type,
          url: `${prefix}${url}`,
          data: qs.stringify(postParams)
        }
        if (type === 'get' || type === 'GET') {
        }
        instance(fetchData).then(response => {
          const res = response.data
          if (res.code === status) {
            resolve(res)
          } else {
            resolve(res)
          }
        }).catch(error => {
          reject(error)
        })
      })
    }
    
    export {
      fetch
    }
  複製代碼

• fetch-api

  import {
      fetch
    } from './index'
    import {
      API_ROOT_CODE
    } from '../config/config' // 域名配置區域
    export default {
      getDemo (params) {
        // demo
        return fetch('get', API_ROOT_CODE, '/test/', params, 0)
      }
    }
  複製代碼

... ... 等等等（此處省略，其餘結構詳情請參考源碼）

調試工具

<script>
  var _hmt = _hmt || [];
  (function () {
    // 這裏使用的是 eruda， vconsole也不錯，根據我的習慣（兩種都是攔截了請求資源，因此遇到一些奇葩的請求問題，不妨註釋一下）
    const domains = [] // 正式服域名配置 根據域名自動判斷是否開啓
    const hostname = window.location.hostname
    if (domains.indexOf(hostname) === -1) {
      var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
      document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
      document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
    }
  })();
</script>
... ... 
複製代碼

結語

本文基於cli拓展優化，基本適用於目前絕大多數項目級多頁面開發，歡迎你們多提一些寶貴意見和看法，歡迎指正~
複製代碼

GIT源碼，直通車