快捷導(dǎo)航

Vue基礎(chǔ)學(xué)習(xí)之項目整合及優(yōu)化

更新時間：2019年06月02日 08:41:20 作者：Poetry’s Blog

這篇文章主要給大家介紹了關(guān)于Vue基礎(chǔ)學(xué)習(xí)之項目整合及優(yōu)化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

一旦相對層次結(jié)構(gòu)較深，我們就很難去定位所引入文件的具體位置，其實這并不是我們應(yīng)該操心的地方，完全可以交給 webpack 來進(jìn)行處理。在原生的 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 來進(jìn)行間接修改，代碼如下

/* 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 來簡化路徑的優(yōu)化就實現(xiàn)了。但是需要注意的是對于在樣式及 html 模板中引用路徑的簡寫時，前面需要加上～符，否則路徑解析會失敗，如：

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

二、整合功能模塊

在多頁應(yīng)用的構(gòu)建中，由于存在多個入口文件，因此會出現(xiàn)重復(fù)書寫相同入口配置的情況，這樣對于后期的修改和維護(hù)都不是特別友好，需要修改所有入口文件的相同配置，比如在 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'

// 如果是非線上環(huán)境，不加載 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 的入口文件中也同樣進(jìn)行了上述配置，那我們該如何整合這些重復(fù)代碼，使其能夠?qū)崿F(xiàn)一次修改多處生效的功能呢？最簡單的方法便是封裝成一個共用方法來進(jìn)行調(diào)用，這里我們可以在 common 文件夾下新建 entryConfig 文件夾用于放置入口文件中公共配置的封裝，封裝代碼如下

import { Navigator } from '../index'

export default (Vue) => {

 // 如果是非線上環(huán)境，不加載 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;
}

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

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

// 調(diào)用公共方法加載配置
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({
    // 目標(biāo)文件名稱。[path] 被替換為原始文件的路徑和 [query] 查詢
   asset: '[path].gz[query]',
   // 使用 gzip 壓縮
   algorithm: 'gzip', 
   // 處理與此正則相匹配的所有文件
   test: new RegExp(
    '\\.(js|css)$'
   ),
   // 只處理大于此大小的文件
   threshold: 10240,
   // 最小壓縮比達(dá)到 0.8 時才會被壓縮
   minRatio: 0.8，
   })
  ]
  }
 }
 }
 ...
}

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

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