Vue項目整合及優化的示例分析

這篇文章給大家分享的是有關Vue項目整合及優化的示例分析的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

前言

使用 webpack 構建過 Vue 項目的同學應該知道 alias 的作用，我們可以使用它將復雜的文件路徑定義成一個變量來訪問。在不使用 alias 的項目中，我們引入文件的時候通常會去計算被引入文件對于引入它的文件的相對路徑，比如像這樣

import HelloWorld from '../../../../HelloWorld.vue'

一旦相對層次結構較深，我們就很難去定位所引入文件的具體位置，其實這并不是我們應該操心的地方，完全可以交給 webpack 來進行處理。在原生的 webpack 配置中我們可以定義 alias 來解決這一問題：

const path = require('path')

const resolve = dir => {
 return path.join(__dirname, dir)
}

module.exports = {
 ...
 
 resolve: {
 alias: {
 '@': resolve('src'), // 定義 src 目錄變量
 _lib: resolve('src/common'), // 定義 common 目錄變量,
 _com: resolve('src/components'), // 定義 components 目錄變量,
 _img: resolve('src/images'), // 定義 images 目錄變量,
 _ser: resolve('src/services'), // 定義 services 目錄變量,
 }
 },
 
 ...
}

上方我們在 webpack resolve （解析）對象下配置 alias 的值，將常用的一些路徑賦值給了我們自定義的變量，這樣我們便可以將第一個例子簡化為：

import HelloWorld from '_com/HelloWorld.vue'

而在 CLI 3.x 中我們無法直接操作 webpack 的配置文件，我們需要通過 chainWebpack 來進行間接修改，代碼如下

/* vue.config.js */
module.exports = {
 ...
 
 chainWebpack: config => {
 config.resolve.alias
 .set('@', resolve('src'))
 .set('_lib', resolve('src/common'))
 .set('_com', resolve('src/components'))
 .set('_img', resolve('src/images'))
 .set('_ser', resolve('src/services'))
 },
 
 ...
}

這樣我們修改 webpack alias 來簡化路徑的優化就實現了。但是需要注意的是對于在樣式及 html 模板中引用路徑的簡寫時，前面需要加上 ～ 符，否則路徑解析會失敗，如：

.img {
 background: (~_img/home.png);
}

二、整合功能模塊

在多頁應用的構建中，由于存在多個入口文件，因此會出現重復書寫相同入口配置的情況，這樣對于后期的修改和維護都不是特別友好，需要修改所有入口文件的相同配置，比如在 index 單頁的入口中我們引用了 VConsole 及 performance 的配置，同時在 Vue 實例上還添加了 $openRouter 方法：

import Vue from 'vue'
import App from './index.vue'
import router from './router'
import store from '@/store/'
import { Navigator } from '../../common'

// 如果是非線上環境，不加載 VConsole
if (process.env.NODE_ENV !== 'production') {
 var VConsole = require('vconsole/dist/vconsole.min.js');
 var vConsole = new VConsole();

 Vue.config.performance = true;
}

Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

而在 page1 和 page2 的入口文件中也同樣進行了上述配置，那我們該如何整合這些重復代碼，使其能夠實現一次修改多處生效的功能呢？最簡單的方法便是封裝成一個共用方法來進行調用，這里我們可以在 common 文件夾下新建 entryConfig 文件夾用于放置入口文件中公共配置的封裝，封裝代碼如下

import { Navigator } from '../index'

export default (Vue) => {

 // 如果是非線上環境，不加載 VConsole
 if (process.env.NODE_ENV !== 'production') {
 var VConsole = require('vconsole/dist/vconsole.min.js');
 var vConsole = new VConsole();

 Vue.config.performance = true;
 }

 Vue.$openRouter = Vue.prototype.$openRouter = Navigator.openRouter;
}

上述代碼我們向外暴露了一個函數，在調用它的入口文件中傳入 Vue 實例作為參數即可實現內部功能的共用，我們可以將原本的入口文件簡化為:

import Vue from 'vue'
import App from './index.vue'
import router from './router'
import store from '@/store/'
import entryConfig from '_lib/entryConfig/'

// 調用公共方法加載配置
entryConfig(Vue)

new Vue({
 router,
 store,
 render: h => h(App)
}).$mount('#app')

三、開啟 Gzip 壓縮

/* vue.config.js */
const isPro = process.env.NODE_ENV === 'production'

module.exports = {
 ...
 
 configureWebpack: config => {
 if (isPro) {
  return {
  plugins: [
   new CompressionWebpackPlugin({
    // 目標文件名稱。[path] 被替換為原始文件的路徑和 [query] 查詢
   asset: '[path].gz[query]',
   // 使用 gzip 壓縮
   algorithm: 'gzip', 
   // 處理與此正則相匹配的所有文件
   test: new RegExp(
    '\\.(js|css)$'
   ),
   // 只處理大于此大小的文件
   threshold: 10240,
   // 最小壓縮比達到 0.8 時才會被壓縮
   minRatio: 0.8，
   })
  ]
  }
 }
 }
 ...
}

上方我們通過在生產環境中增加 Gzip 壓縮配置實現了打包后輸出增加對應的 .gz 為后綴的文件，而由于我們配置項中配置的是只壓縮大小超過 10240B（10kB）的 JS 及 CSS，因此不滿足條件的文件不會進行 Gzip 壓縮。

Gzip 壓縮能在普通壓縮的基礎上再進行 50% 以上 的壓縮，我們可以直接來看下控制臺的輸出對比圖

感謝各位的閱讀！關于“Vue項目整合及優化的示例分析”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！