vue專案優化

1.通過nprogress新增進度條效果

安裝執行依賴

匯入nprogress包對應的js和css

import nprogress from 『nprogress』

import 『nprogress/nprogress.css』

在axios的request***中展示進度條

nprogress.start( )

在axios的response***中隱藏進度條

nprogress.done( )

2.解決serve命令中提示的eslint語法錯誤

//自建立的.prettierrc檔案

與格式化工具衝突時找到.prettierrc檔案

「printwidth」:200 -->預設是80，一行可以容納多少字元，換行

3.在執行build命令期間移除所有的console

安裝開發依賴 babel-plugin-transform-remove-console

在babel.config.js配置檔案中，給plugins陣列新增節點』transform-remove-console』

「plugins」: [

[「component」,

],「transform-remove-console」

]在vue ui 中執行build命令，使用live-server執行打包後的專案，觀察控制台有沒有列印

cnpm i live-server -g 安裝live-server

使用live-server執行檔案 live-server --port=***x

4.只在發布階段移除所有的console

babel.config.js配置檔案是執行、開發階段共享的，當我們使用serve命令，執行專案時，console也沒有了

判斷當前所處階段/編譯模式，再視情況給plugins陣列新增節點

//專案發布階段需要用到的babel外掛程式

const proplugins =

//判斷當前的編譯模式：開發or發布 process.env.node_env–>node環境變數

if (process.env.node_env === 『production』)

注：打包後，在開發模式啟動專案，會報錯 uncaught typeerror: cannot redefine property: $router

打包後的dist檔案只能通過live-server --port=***x以服務的形式執行；直接雙擊會有檔案路徑問題，需要我們在vue.config.js中配置publicpath:』./』,

10.通過cdn優化elementui的打包

雖然在開發階段，我們啟用了element-ui元件的按需載入，盡可能地減少了打包的體積，但是那些被按需載入的元件，還是占用了較大的檔案體積。此時，我們可以將element-ui中的元件，也通過cdn的形式來載入，這樣能夠進一步減小打包後的檔案體積

具體操作流程如下：

在main-prod.js中，注釋掉element-ui按需載入的**

在index.html的頭部區域中，通過cdn載入element-ui的js和css樣式

// import 『./plugins/element.js』

注意：再次打包之前，關閉執行專案，防止資源占用，打包出現問題商品分類欄，操作列沒有顯示，沒用到slot-scope也要寫 pugin/element.js被注釋了，外掛程式的掛載還是得寫到main.js中樣式可以刪，元件的註冊不能刪 import treetable from 'vue-table-with-tree-grid' import vuequilleditor from 'vue-quill-editor'

//掛載treetable為全域性元件、掛載富文字編輯器
vue.component('tree-table', treetable)
vue.use(vuequilleditor)

11.根據不同的環境定製不同的首頁內容

解決cannot redefine property: $router問題，問題出現原因import匯入和cdn資源引用重複衝突

我們需要在index.html中來判斷當前環境為開發階段還是發布階段，但是在index.html中無法獲取到process.env.node_env，但是index.html中可以獲取到htmlwebpackplugin該外掛程式的配置資料。

htmlwebpackplugin外掛程式的作用：

獲取到public下的index.html，在打包後的dist根目錄下生成乙個新的index.html

自動引入打包的js和css檔案

如果是發布階段，我們給htmlwebpackplugin新增乙個標識為true

//使用外掛程式

config.plugin(『html』).tap(args => )

如果是開發階段也新增乙個標識，為false

//使用外掛程式

config.plugin(『html』).tap(args => )

在頁面通過htmlwebpackplugin獲取到標識，判斷該標識為true還是false，如果是true代表發布階段，應該新增cdn資源，如果是false則不需要新增

語法類似art-template原始語法，webpack會自己解析

<%= htmlwebpackplugin.options.isprod?'':'dev-' %>後台管理系統

vue專案優化

vue專案優化

vue專案優化

Vue專案打包優化

相關推薦