快捷導(dǎo)航

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

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

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

前言

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

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

一旦相對層次結(jié)構(gòu)較深，我們就很難去定位所引入文件的具體位置，其實(shí)這并不是我們應(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 的值，將常用的一些路徑賦值給了我們自定義的變量，這樣我們便可以將第一個(gè)例子簡化為：

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

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

二、整合功能模塊

在多頁應(yīng)用的構(gòu)建中，由于存在多個(gè)入口文件，因此會(huì)出現(xiàn)重復(fù)書寫相同入口配置的情況，這樣對于后期的修改和維護(hù)都不是特別友好，需要修改所有入口文件的相同配置，比如在 index 單頁的入口中我們引用了 VConsole 及 performance 的配置，同時(shí)在 Vue 實(shí)例上還添加了 $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)一次修改多處生效的功能呢？最簡單的方法便是封裝成一個(gè)共用方法來進(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;
}

上述代碼我們向外暴露了一個(gè)函數(shù)，在調(diào)用它的入口文件中傳入 Vue 實(shí)例作為參數(shù)即可實(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 時(shí)才會(huì)被壓縮
   minRatio: 0.8，
   })
  ]
  }
 }
 }
 ...
}

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

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