vue-cli3項(xiàng)目搭建配置以及性能優(yōu)化

vue-cli3項(xiàng)目搭建配置以及性能優(yōu)化

在之前的開發(fā)中主要用的是vue-cli2，最近空閑時間比較多，接下來有新項(xiàng)目荚藻，本著偷懶的本能，自己打算搭建一個基礎(chǔ)包以備后期開發(fā)應(yīng)用洁段，并對其進(jìn)行性能優(yōu)化和配置。

該項(xiàng)目的GitHub：https://github.com/bayi-lzp/vue-cli3-init 求星

master分支為基礎(chǔ)包共郭，vi_mint_ui分支為優(yōu)化后項(xiàng)目祠丝，可根據(jù)自己需要進(jìn)行切換。

搭建整個過程如下：

  • 初始化項(xiàng)目
  • 修改目錄結(jié)構(gòu)
  • 多環(huán)境運(yùn)行
  • axios封裝
  • 模塊化vuex
  • 全局引用樣式
  • 移動端適配配置
  • 常用util
  • 引入第三方UI框架
  • 配置vue.config.js文件
  • vue項(xiàng)目框架性能優(yōu)化（重點(diǎn)） (v1_mint_ui分支)

1.項(xiàng)目初始化

  • 創(chuàng)建項(xiàng)目

可用命令行或者ui面板進(jìn)行創(chuàng)建除嘹，具體的創(chuàng)建方式及詳細(xì)說明写半，可以參考我的另一篇文章 vue-cli3初始化項(xiàng)目搭建

  • 運(yùn)行項(xiàng)目
npm run serve
image

2.修改目錄結(jié)構(gòu)

用編輯器打開后可以看到目錄結(jié)構(gòu)。相對于vue-cli2精簡了很多尉咕，減少了對webpack的配置叠蝇。

image

  • node_modules 文件夾 項(xiàng)目依賴(對webpack進(jìn)行了封裝)

  • public 文件夾

    1.favicon.ico 是 網(wǎng)站圖標(biāo)

    2.index.html 頁面入口文件

  • src 文件夾

    main.js 入口js

    assets 存放靜態(tài)文件

    components 存放公用組件

    App.vue 入口vue文件

  • .eslintrc.js 配置

  • .gitignore 指定文件無需提交到git上

  • balel.config.js 使用一些預(yù)設(shè)

  • package.json 項(xiàng)目描述及依賴

  • package-lock.json 版本管理使用的文件

由于現(xiàn)在的目錄結(jié)構(gòu)不利于后期的開發(fā)，現(xiàn)在我們增加部分文件年缎，待后續(xù)可以進(jìn)行功能擴(kuò)展悔捶。在src文件下：新建api文件夾铃慷，config文件夾,router文件夾，utils文件夾蜕该，views文件夾犁柜，store文件夾。并在其文件下建子目錄堂淡，詳細(xì)請參考目錄截圖：

image

2.多環(huán)境運(yùn)行

由于我們的項(xiàng)目需要在不同環(huán)境下進(jìn)行運(yùn)行(開發(fā)馋缅，生產(chǎn)，測試等)绢淀，這避免我們需要多次的去切換請求的地址以及相關(guān)的配置萤悴，vue-cli2是可以直接在config文件中進(jìn)行配置的，但是vue-cli3已經(jīng)簡化了皆的，官方文檔也有進(jìn)行配置的說明稚疹，實(shí)現(xiàn)具體有以下2種方法，我比較偏向第二種祭务。

  • 第一種實(shí)現(xiàn)方法

1.在根目錄新建2個文件内狗，分別為.env.development，.env.production义锥，.env.test柳沙。注意文件是只有后綴的。

.env.development 模式用于serve拌倍，開發(fā)環(huán)境赂鲤，就是開始環(huán)境的時候會引用這個文件里面的配置

.env.production模式用于build，線上環(huán)境柱恤。

.env.test 測試環(huán)境

2.分別在文件內(nèi)寫上：

開發(fā)環(huán)境：

//.env.development 
VUE_APP_BASE_API = '需要請求API'

線上環(huán)境：

//.env.production
VUE_APP_BASE_API = '需要請求API'

測試環(huán)境：

//.env.test
VUE_APP_BASE_API = '需要請求API'

當(dāng)需要用到該變量是可以用process.env.VUE_APP_BASE_API進(jìn)行取值数初。

3.更改package.json文件

 "scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },
  • 第二種實(shí)現(xiàn)方式

1.在config文件新建index.js文件，根據(jù)全局的環(huán)境變量來進(jìn)行判斷梗顺，并進(jìn)行輸出泡孩。代碼如下：

// 一些全局的config配置
const modeUrlObj = {
  // 生產(chǎn)環(huán)境
  'production': {
    baseURL: 'http://xxx:9091/pro/',
    authBaseURL: ''
  },
  // 開發(fā)環(huán)境
  'development': {
    baseURL: 'http://xxxx:9091/dev/',
    authBaseURL: ''
  },
  // 測試環(huán)境
  'test': {
    baseURL: 'http://xxxx:9091/test/',
    authBaseURL: ''
  }
}
export default modeUrlObj[process.env.NODE_ENV]
  1. 更改package.json文件
 "scripts": {
    "dev": "vue-cli-service serve",
    "test": "vue-cli-service serve --mode test",
    "build": "vue-cli-service build",
    "build:test": "vue-cli-service build --mode test",
    "lint": "vue-cli-service lint"
  },
  1. 引用的方法可以參照如下：
import config from '../config/index' // 路徑配置

config.baseURL  // 對應(yīng)環(huán)境api

4.運(yùn)行命令行

npm run dev // 開發(fā)環(huán)境

npm run test // 測試環(huán)境

npm run build // 正式環(huán)境打包

npm run build:test // 測試環(huán)境打包

2. axios封裝

在vue項(xiàng)目中，和后臺交互獲取數(shù)據(jù)這塊寺谤，我們通常使用的是axios庫仑鸥，它是基于promise的http庫，可運(yùn)行在瀏覽器端和node.js中变屁。他有很多優(yōu)秀的特性眼俊，例如攔截請求和響應(yīng)、取消請求粟关、轉(zhuǎn)換json疮胖、客戶端防御XSRF等。所以我們的尤大大也是果斷放棄了對其官方庫vue-resource的維護(hù)，直接推薦我們使用axios庫澎灸。如果還對axios不了解的，可以移步axios文檔击孩。

  • 安裝依賴
npm install axios --save; // 安裝axios
  • 配置axios

在uitls文件下新增request.js文件，在這里我們對axios進(jìn)行初始化后巩梢，暴露給需要引用的文件，方便開發(fā)鞠抑。

import axios from 'axios'
import config from '../config/index' // 路徑配置

創(chuàng)建axios實(shí)例忌警，并進(jìn)行配置

// 創(chuàng)建axios 實(shí)例
const service = axios.create({
    baseURL: config.baseURL, // api的base_url
    timeout: 10000 // 請求超時時間
})

利用axios的請求攔截和響應(yīng)攔截可以對登錄和權(quán)限方面進(jìn)行控制，具體需求可以自己進(jìn)行配置法绵。完整代碼如下：

import axios from 'axios'
import config from '../config/index' // 路徑配置

// 創(chuàng)建axios 實(shí)例
const service = axios.create({
    baseURL: config.baseURL, // api的base_url
    timeout: 10000 // 請求超時時間
})

// request 攔截器
service.interceptors.request.use(
    config => {
        // 這里可以自定義一些config 配置

        return config
    },
    error => {
        //  這里處理一些請求出錯的情況

        Promise.reject(error)
    }
)

// response 攔截器
service.interceptors.response.use(
    response => {
        const res = response.data
        // 這里處理一些response 正常放回時的邏輯

        return res
    },
    error => {
        // 這里處理一些response 出錯時的邏輯

        return Promise.reject(error)
    }
)

export default service
  • api請求配置

在api文件下新建分類的api請求文件箕速。根據(jù)具體需要分類。主要是方便團(tuán)隊(duì)開發(fā)朋譬，容易歸類盐茎。可以參考下面配置徙赢。

import request from '@/utils/request'

export default {
  // 登錄
  login (data) {
    return request({
      url: '/login',
      method: 'post',
      data
    })
  },
  // 獲取用戶信息
  getUserInfo () {
    return request({
      url: '/userinfo',
      method: 'get'
    })
  }
}

業(yè)務(wù)中需要進(jìn)行請求可以用import后字柠，進(jìn)行傳參即可。

4.模塊化vuex

Vuex 是一個專為 Vue.js 應(yīng)用程序開發(fā)的狀態(tài)管理模式狡赐。它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài)窑业，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化。

如果對vuex還不大了解的可以自行閱讀vuex官方文檔枕屉。

  • 安裝vuex
npm install vuex -S
  • 新建目錄

modules文件主要用法存放分類的文件常柄，可以進(jìn)行區(qū)分，getters文件是對state進(jìn)行處理搀庶，index.js主要進(jìn)行一些引入拐纱，初始化操作。

image
  • 書寫vuex配置

index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user' // 引入各個模塊的代碼
import getters from './getters'

Vue.use(Vuex)

const store = new Vuex.Store({
    modules: {
        user
    },
    getters
})

export default store

getter.js文件

getter中的配置可根據(jù)需求進(jìn)行增加或者刪除哥倔，下面是示例。

const getters = {
  requestLoading: state => state.app.requestLoading,
  size: state => state.app.size,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  roles: state => state.user.roles
}
export default getters

moduels/user.js文件

該文件為與業(yè)務(wù)相關(guān)揍庄，可以跟據(jù)具體參見進(jìn)行增加和刪除命名咆蒿。每個文件的基本配置和用法如下：

import { getToken, setToken } from '@/utils/auth'
import api from '@/api/user'

const user = {
  state: {
    token: getToken(),
  },

  mutations: {
    SET_TOKEN: (state, token) => {
      state.token = token
    },
  },

  actions: {
    // 登錄
    Login ({ commit }, userInfo) {
      return new Promise((resolve, reject) => {
        api.login(userInfo).then(res => {
          if (res.code === 200) {
            setToken(res.data)
            commit('SET_TOKEN', res.data)
          }
          resolve()
        }).catch(err => {
          reject(err)
        })
      })
    }
  }
}

export default user

5.全局樣式引用

在項(xiàng)目開發(fā)過程中，我們經(jīng)常需要全局樣式引用，例如主題色等沃测，如果每次去寫的化會變得很麻煩缭黔。因?yàn)槲覀儜?yīng)該了sass預(yù)語言編譯，所以可以大膽的應(yīng)用其特性蒂破。例如變量馏谨，函數(shù)惧互，混入等喊儡。但是我們需要在項(xiàng)目中進(jìn)行全局的配置才能有效果。不用在每一個頁面都進(jìn)行引入樣式捻悯，就能直接引用算柳。

  • 新建目錄

在assets下新建如下文件埠居，具體的代碼自行進(jìn)行配置

* common.scss 主要存放公共的樣式

* mixin.scss 存放混入樣式

* reset.scss 存放重置樣式滥壕。

* variable.scss 存放變量
image
  • 全局引入

新建vue.config.js文件，并寫上以下代碼

module.exports = {
  css: {
    loaderOptions: {
      // pass options to sass-loader
      sass: {
        // @/ is an alias to src/
        // so this assumes you have a file named `src/variables.scss`
        data: `
               @import "@/assets/css/variable.scss"; 
               @import "@/assets/css/common.scss";
               @import "@/assets/css/mixin.scss";
              `
      }
    }
  },
}

在app.vue中引入reset.scss文件称鳞，完成后冈止，樣式即可進(jìn)行全局調(diào)用了闺属。

<style lang="scss">
  @import "assets/css/reset";
</style>

6.移動端適配配置

在本項(xiàng)目中主要用rem來進(jìn)行頁面的適配操作的掂器，因?yàn)閞em就可以隨根字體大小改變而改變国瓮，從而實(shí)現(xiàn)了自適應(yīng)的功能乃摹。但是html的字體是固定的，所以需要監(jiān)聽頁面大小的變化肪康，我主要用了淘寶的amfe-flexible來進(jìn)行監(jiān)聽改變的磷支。將項(xiàng)目中css的px轉(zhuǎn)成rem單位雾狈，免去計(jì)算煩惱,我們可以用scss來進(jìn)行計(jì)算或者利用px2rem插件來進(jìn)行自動轉(zhuǎn)化善榛。因?yàn)槭情_發(fā)移動端，需把mate換為
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale= 1.0, minimum-scale=1.0">
實(shí)現(xiàn)方法如下：

  • 安裝amfe-flexible

npm i amfe-flexible --save

  • px轉(zhuǎn)rem

方法一：

在common.scss文件中咒循，全局引入scss函數(shù)：

/**
  轉(zhuǎn)化px為rem叙甸。$base-font-size = 設(shè)計(jì)稿尺寸/10
*/
@function px2rem($px, $base-font-size: 37.5) {
  @return ($px/$base-font-size)*1rem
}

調(diào)用方式直接： width: px2rem(175);

方法二：

安裝依賴

npm i postcss-pxtorem --save-dev

package.json內(nèi)裆蒸，在postcss內(nèi)添加：

"postcss": {
   "plugins": {
     "autoprefixer": {},
     "postcss-pxtorem": {
       "rootValue": 75, // 設(shè)計(jì)稿寬度的1/10,（JSON文件中不加注釋光戈，此行注釋及下行注釋均刪除）
       "propList":["*"] // 需要做轉(zhuǎn)化處理的屬性久妆，如`hight`筷弦、`width`烂琴、`margin`等奸绷，`*`表示全部
    }
   }
 },

7.常用util

該文件主要是對一些常用的js進(jìn)行封裝号醉，例如時間格式化畔派，LocalStorage操作等线椰，相對比較常用的方法憨愉，這個文件可以進(jìn)行保存，要用到時直接復(fù)制過來用即可笨蚁。下面是我封裝LocalStorage的文件趟庄，可參考以下奋单，其他自行設(shè)置

import Cookies from 'js-cookie'

const TokenKey = 'Authorization'
/*
* 設(shè)置setLocalStorage
* */
export function setLocalStorage (key, value) {
    window.localStorage.setItem(key, window.JSON.stringify(value))
}
/*
* 獲取getLocalStorage
* */
export function getLocalStorage (key) {
    return window.JSON.parse(window.localStorage.getItem(key) || '[]')
}
/*
* 設(shè)置setSessionStorage
* */
export function setSessionStorage (key, value) {
    window.sessionStorage.setItem(key, window.JSON.stringify(value))
}
/*
* 獲取getSessionStorage
* */
export function getSessionStorage (key) {
    return window.JSON.parse(window.sessionStorage.getItem(key) || '[]')
}
/*
* 獲取getToken
* */
export function getToken () {
    return Cookies.get(TokenKey)
}
/*
* 設(shè)置setToken
* */
export function setToken (token) {
    return Cookies.set(TokenKey, token)
}
/*
* 移除removeToken
* */
export function removeToken () {
    return Cookies.remove(TokenKey)
}

8.引入第三方UI框架

在前端開發(fā)過程中览濒，避免一些造輪子情況出現(xiàn)应又，經(jīng)常需要一些ui框架株扛，可以根據(jù)自己需要引入第三方UI框架洞就，自己進(jìn)行配置，我選擇了mintui來進(jìn)行引入革娄。采用了按需引入的方式稠腊。

  • 安裝依賴

npm i mint-ui -S

  • 配置按需引入

借助 babel-plugin-component架忌，我們可以只引入需要的組件叹放，以達(dá)到減小項(xiàng)目體積的目的井仰。如果全部引入雹嗦，文件太大了了罪。

首先泊藕，安裝 babel-plugin-component：

npm install babel-plugin-component -D
然后玫锋，將 .babel.config.js 修改為：

module.exports = {
  presets: [
    '@vue/app'
  ],
   plugins: [
        [
            "component",
            {
                "libraryName": "mint-ui",
                "style": true
            }
        ]
    ]
}
}

如果你只希望引入部分組件撩鹿，比如 Button 和 Cell，那么需要在 main.js 中寫入以下內(nèi)容：

import Vue from 'vue'
import { Button, Cell } from 'mint-ui'
import App from './App.vue'

Vue.component(Button.name, Button)
Vue.component(Cell.name, Cell)
/* 或?qū)憺? * Vue.use(Button)
 * Vue.use(Cell)
 */

9.配置vue.config.js文件

  • 基本配置

    1.文件目錄配置別名
    我們可以把src配置為@窜管，如果需要就不用到根目錄開始寫了幕帆，直接用@/xxx/進(jìn)行引用。根據(jù)自己需要進(jìn)行配置碱茁，在vue.config.js文件中加入代碼

     // 配置
chainWebpack: (config)=>{
// 配置別名
config.resolve.alias
    .set('@', resolve('src'))
    .set('assets',resolve('src/assets'))
    .set('components',resolve('src/components'))
    .set('router',resolve('src/router'))
    .set('utils',resolve('src/utils'))
    .set('static',resolve('src/static'))
    .set('store',resolve('src/store'))
    .set('views',resolve('src/views'))
    }

    2.跨域配置
    在前端請求過程中纽竣，如果后臺沒有設(shè)置跨域請求的蜓氨，可以在webpack進(jìn)行配置。

    devServer: {
proxy: {
  '/api': {
    target: 'http://127.0.0.1:8080',
    changeOrigin: true
  }
 }
}

    3.其他配置
    具體可以參照官網(wǎng)的配置說明嗜侮，在項(xiàng)目中我用到了

    assetsDir: 'assets',   // 靜態(tài)文件目錄
publicPath: './',    // 編譯后的地址顷霹，可以根據(jù)環(huán)境進(jìn)行設(shè)置
lintOnSave: true, // 是否開啟編譯時是否不符合eslint提示

    以上的所有代碼必須寫在module.exports輸出才能生效. 詳細(xì)的配置可參考官網(wǎng) vue-cli3

10.項(xiàng)目框架性能優(yōu)化 (v1_mint_ui分支)

通過以上的基本配置，項(xiàng)目已經(jīng)符合我們工作需要了绅喉，但是在工作過程中會發(fā)現(xiàn)隨著項(xiàng)目的集成度越來越高，業(yè)務(wù)越來越多。出現(xiàn)了加載慢和打包文件過大的問題凿试。導(dǎo)致我們頁面白屏?xí)r間過長那婉，用戶體驗(yàn)不友好。那么如果你感興趣的話呛谜，可以進(jìn)行以下的配置隐岛，可以大大大大大的減小體積和加載速度。在master分支是沒有進(jìn)行優(yōu)化的元践，如果需要看優(yōu)化代碼可以到另外一個分支。所以在頁面引入的代碼都是當(dāng)前頁面需要的執(zhí)行代碼象浑，可以往下面幾個方法進(jìn)行處理。

  • js,css代碼的最小化壓縮和分割

  • js,css代碼公用代碼提取, 按需引入(cdn加載)

  • 圖片文件的壓縮

  • gzip的壓縮

  • 去除console.log

1.js,css代碼的最小化壓縮和分割

首先蚪拦，我們先對js文件進(jìn)行配置以達(dá)到壓縮效果，先看一下沒有配置代碼情況，整個app.js 的文件是2.8M（因?yàn)槭浅跏柬?xiàng)目）驰贷，但是如果頁面一多盛嘿，就不只這個數(shù)了。

image

我們會通過chainWebpak來處理. 在優(yōu)化前, 看下相關(guān)文件的響應(yīng)代碼: 看下app.js文件的返回代碼:代碼如下：

image

在vue.config.js文件中加入,run以下后查看app.js情況括袒，文件會變写握住（由于初始項(xiàng)目體積小，看不出多大區(qū)別）锹锰。

module.exports = {
  chainWebpack: config => {
    config.optimization.minimize(true);
  }
}
image

分割代碼,相應(yīng)的文件中存入分割后的代碼芥炭。

module.exports = {
    
    chainWebpack: config => {
        config.optimization.minimize(true);
        config.optimization.splitChunks({
          chunks: 'all'
        })
    }
}
image

加入以上代碼后，分成了2個文件训唱，最大的只有2.7M了歧强，這樣可以分成多個進(jìn)行加載茅特，可以達(dá)到最快化兵睛，但是一定要平衡文件大小的和分割出來的文件數(shù)量的平衡, 數(shù)量多了, 請求也會變慢的, 影響性能.可以根據(jù)項(xiàng)目的進(jìn)行設(shè)置若债，具體可參考官方文檔的詳細(xì)說明。

2.js,css代碼公用代碼提取, 按需引入(CDN加載)

把公用代碼提取出來,然后采用使用免費(fèi)的cdn資源進(jìn)行加載。在項(xiàng)目中我們主要是引入引入不同的模塊庫才會導(dǎo)致文件較大累澡，那么是否可以把這些文件進(jìn)一步處理蕊梧，答案是可以的橄抹，比如vue, vuex, vue-router, element-ui等公共資源庫。利用webpack我們可以使用externals參數(shù)來配置:

在vue.config.js文件:

module.exports = {
    chainWebpack: config => {
          // 壓縮代碼
    config.optimization.minimize(true);
    // 分割代碼
    config.optimization.splitChunks({
      chunks: 'all'
    })
    // 用cdn方式引入
    config.externals({
      'vue': 'Vue',
      'vuex': 'Vuex',
      'vue-router': 'VueRouter',
      'mint-ui': 'MINT',  // 需用MINT
      'axios': 'axios'
    })
    }
}

index.html加入CDN地址,注意引入的時候要寫在body里面涎才，否則會報(bào)錯。

    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    <script src="https://cdn.bootcss.com/vuex/3.1.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
    <script src="https://cdn.bootcss.com/mint-ui/2.2.13/index.js"></script>

mint-ui樣式通過CDN引入茎芋。然后商儲mian.js文件的 import 'mint-ui/lib/style.css' （全局引入模式才有）

<link  rel="stylesheet">

如果需要引入其他依賴的CDN可以通過BootCDN查找進(jìn)行引入眷蜈。

重新運(yùn)行項(xiàng)目, 看看效果酪夷，已經(jīng)大大的減小了很多库说，到了k級別了：

image

提取css代碼：

因?yàn)閖s會動態(tài)的加載出css，所以js文件包會比較大歇由，那么需要提取css代碼到文件. 這里我們只需要將css配置一下:


module.exports = {
  css: {
      extract: true
  }
}
image

3.圖片文件的壓縮

圖片文件大于在webpack設(shè)定的值時祭刚，我們可以對其進(jìn)行壓縮在進(jìn)行引入即碗，安利給大家一個壓縮圖片的網(wǎng)站https://tinypng.com/夜只，它可以批量的壓縮圖片又不會失真秕脓，壓縮比相對較大吠架。可以對圖片進(jìn)行有效壓縮薛训。

4.gzip的壓縮

如果后臺有對前端的代碼進(jìn)行g(shù)zip壓縮的話辙喂，那么就不需要進(jìn)行壓縮了，后臺自己配置就可以测柠。如果后臺不具備這種情況那么我們可以利用compression-webpack-plugin插件可以幫助我們進(jìn)行g(shù)zip壓縮：

安裝依賴：

npm install --save-dev compression-webpack-plugin

然后引入相關(guān)代碼:

const CompressionWebpackPlugin = require('compression-webpack-plugin')

const compress = new CompressionWebpackPlugin(
 {
   filename: info => {
     return `${info.path}.gz${info.query}`
   },
   algorithm: 'gzip', 
   threshold: 10240,
   test: new RegExp(
     '\\.(' +
     ['js'].join('|') +
     ')$'
   ),
   minRatio: 0.8,
   deleteOriginalAssets: false
 }
)
module.exports = {
devServer: {

   before(app, server) { 
     app.get(/.*.(js)$/, (req, res, next) => { 
       req.url = req.url + '.gz';
       res.set('Content-Encoding', 'gzip');
       next();
     })
   }
 }
 configureWebpack: {
     plugins: [compress]
 }

重新run一遍，出現(xiàn)了意向不到的結(jié)果了赃阀。又原來的2.8M轉(zhuǎn)化為250+kb了霎肯，縮小了11倍以上。重大突破

image

6.去除console.log

正常情況下我們會在開發(fā)環(huán)境進(jìn)行console調(diào)試榛斯，但是如果不刪除观游，過多會出現(xiàn)內(nèi)存泄漏的情況，那么我們可以在正式環(huán)境的時候就把它給干掉驮俗，實(shí)現(xiàn)方法如下：

方法一：

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

方法二：使用babel-plugin-transform-remove-console插件
npm i --save-dev babel-plugin-transform-remove-console
在babel.config.js中配置

const plugins = [];
if(['production', 'prod'].includes(process.env.NODE_ENV)) {  
  plugins.push("transform-remove-console")
}

module.exports = {
  presets: [["@vue/app",{"useBuiltIns": "entry"}]],
  plugins: plugins
};

經(jīng)過以上的所有騷操作懂缕，整個項(xiàng)目已經(jīng)差不多完成了，接下來就靠兄弟們?nèi)ラ_發(fā)業(yè)務(wù)和優(yōu)化了王凑。由于本人技術(shù)有限搪柑，有錯誤地方還望指出來聋丝，如果覺得對你有幫助麻煩點(diǎn)一下贊，或者個星工碾，這是對我最大的幫助弱睦。后續(xù)打算再寫一個項(xiàng)目的開發(fā)過程，自己成長也希望大家希望倚喂。有什么問題可以留言幫忙解決每篷。

最后附上該項(xiàng)目的GitHub：https://github.com/bayi-lzp/vue-cli3-init

master分支為基礎(chǔ)包，vi_mint_ui分支為優(yōu)化后項(xiàng)目端圈，可根據(jù)自己需要進(jìn)行切換焦读。

注：轉(zhuǎn)載請帶上文章出處，避免帶來不必要麻煩舱权。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 人面猴
    序言：七十年代末矗晃，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子宴倍，更是在濱河造成了極大的恐慌张症，老刑警劉巖，帶你破解...
    沈念sama閱讀 216,324評論 6贊 498
  • 死咒
    序言：濱河連續(xù)發(fā)生了三起死亡事件鸵贬，死亡現(xiàn)場離奇詭異俗他，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)阔逼，發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,356評論 3贊 392
  • 救了他兩次的神仙讓他今天三更去死
    文/潘曉璐 我一進(jìn)店門兆衅，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人嗜浮，你說我怎么就攤上這事羡亩。” “怎么了危融？”我有些...
    開封第一講書人閱讀 162,328評論 0贊 353
  • 道士緝兇錄：失蹤的賣姜人
    文/不壞的土叔 我叫張陵畏铆，是天一觀的道長。 經(jīng)常有香客問我吉殃，道長辞居，這世上最難降的妖魔是什么？ 我笑而不...
    開封第一講書人閱讀 58,147評論 1贊 292
  • ?港島之戀（遺憾婚禮）
    正文 為了忘掉前任蛋勺，我火速辦了婚禮速侈，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘迫卢。我一直安慰自己，他們只是感情好冶共，可當(dāng)我...
    茶點(diǎn)故事閱讀 67,160評論 6贊 388
  • 惡毒庶女頂嫁案：這布局不是一般人想出來的
    文/花漫 我一把揭開白布乾蛤。 她就那樣靜靜地躺著每界，像睡著了一般。 火紅的嫁衣襯著肌膚如雪家卖。 梳的紋絲不亂的頭發(fā)上眨层，一...
    開封第一講書人閱讀 51,115評論 1贊 296
  • 城市分裂傳說
    那天，我揣著相機(jī)與錄音上荡，去河邊找鬼趴樱。 笑死，一個胖子當(dāng)著我的面吹牛酪捡，可吹牛的內(nèi)容都是我干的叁征。 我是一名探鬼主播，決...
    沈念sama閱讀 40,025評論 3贊 417
  • 雙鴛鴦連環(huán)套：你想象不到人心有多黑
    文/蒼蘭香墨 我猛地睜開眼逛薇，長吁一口氣：“原來是場噩夢啊……” “哼捺疼！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起永罚，我...
    開封第一講書人閱讀 38,867評論 0贊 274
  • 萬榮殺人案實(shí)錄
    序言：老撾萬榮一對情侶失蹤啤呼，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后呢袱，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體官扣，經(jīng)...
    沈念sama閱讀 45,307評論 1贊 310
  • ?護(hù)林員之死
    正文 獨(dú)居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,528評論 2贊 332
  • ?白月光啟示錄
    正文 我和宋清朗相戀三年羞福，在試婚紗的時候發(fā)現(xiàn)自己被綠了惕蹄。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,688評論 1贊 348
  • 活死人
    序言：一個原本活蹦亂跳的男人離奇死亡坯临，死狀恐怖焊唬，靈堂內(nèi)的尸體忽然破棺而出，到底是詐尸還是另有隱情看靠，我是刑警寧澤赶促，帶...
    沈念sama閱讀 35,409評論 5贊 343
  • ?日本核電站爆炸內(nèi)幕
    正文 年R本政府宣布，位于F島的核電站挟炬，受9級特大地震影響鸥滨，放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜谤祖，卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,001評論 3贊 325
  • 男人毒藥：我在死后第九天來索命
    文/蒙蒙 一婿滓、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧粥喜，春花似錦凸主、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,657評論 0贊 22
  • 一樁弒父案卿吐，背后竟有這般陰謀
    文/蒼蘭香墨 我抬頭看了看天上的太陽旁舰。三九已至，卻和暖如春嗡官，著一層夾襖步出監(jiān)牢的瞬間箭窜，已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,811評論 1贊 268
  • 情欲美人皮
    我被黑心中介騙來泰國打工衍腥， 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留磺樱，地道東北人。 一個月前我還...
    沈念sama閱讀 47,685評論 2贊 368
  • 代替公主和親
    正文 我出身青樓婆咸，卻偏偏與公主長得像竹捉，于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子擅耽，可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,573評論 2贊 353