Vue-cli3.0的打包性能優化方案

時間 2019-11-05

標籤 vue cli3.0 cli 打包性能優化方案欄目系統性能简体版

原文原文鏈接

項目背景

項目模板使用的是基於Vue-cli3的vue-admin-template
項目是單頁後臺
項目屬於中小型項目

問題 - 首屏加載很是慢

讓咱們看看沒任何處理的測試包javascript

首屏加載居然須要5-10s的加載時間! 這確定是不符合線上要求的css

分析一下加載的資源,明確發現如下問題html

elementUI的js文件太大了,嚴重影響速度
總體代碼未壓縮
某張圖片,靜態資源過大,應減少該圖片體積,或者優化靜態資源加載速度

如何優化

前端開啓gzip

關於這一點做者文檔中分析構建文件體積有提到,可是卻沒有給出解決方案,配置以下前端

服務器開啓nginx後,代碼通過壓縮就會小不少,可是若是咱們打包後的代碼沒有壓縮過,那就是服務端來負責壓縮,天然會拖慢服務端加載速度,咱們應該在webpack中開啓壓縮vue

生成壓縮代碼的webpack插件java

npm install compression-webpack-plugin -D
複製代碼

修改vue.config.jswebpack

該對象將會被 webpack-merge 合併入最終的 webpack 配置。具體請看webpack相關nginx

configureWebpack: config => {
    const baseConfig = {
        name: name,
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    }
    if (process.env.NODE_ENV === 'production') {
        return {
            plugins: [
                // 壓縮代碼
                new CompressionPlugin({
                    test: /\.js$|\.html$|.\css/, // 匹配文件名
                    threshold: 10240, // 對超過10k的數據壓縮
                    deleteOriginalAssets: false // true 不刪除源文件 false 刪除源文件
                })
            ],
            ...baseConfig
        }
    } else {
        return { ...baseConfig }
    }
}
複製代碼

配置完成後再次打包代碼,就會發現js文件夾裏面多出了 .js.gz文件,那就是壓縮後的js代碼git

首頁圖進行優化

關於圖片部分,由於這個後臺僅僅有一張登陸背景圖很大,因此對於小項目,只要將png圖片轉成jpg圖片便可因此大量的圖片體積,這個交給ui來完成github

去除console.log與警告

注意: 去除警告如今爲插件 TerserWebpackPlugin webpack-parallel-uglify-plugin不在提供去除log與警告功能

該插件的配置 minify-options

線上項目天然不該該被看到控制檯的打印日誌,因此咱們須要將console.log都去除掉

npm install compression-webpack-plugin -D
複製代碼

修改vue.config.js configureWebpack部分

configureWebpack: config => {
    const baseConfig = {
        name: name,
        resolve: {
            alias: {
                '@': resolve('src')
            }
        }
    }
    if (process.env.NODE_ENV === 'production') {
        return {
            plugins: [
                // 壓縮代碼
                new CompressionPlugin({
                    test: /\.js$|\.html$|.\css/, // 匹配文件名
                    threshold: 10240, // 對超過10k的數據壓縮
                    deleteOriginalAssets: false // 不刪除源文件
                }),
                // 去除console.log
                new TerserPlugin({
                    terserOptions: {
                        compress: {
                            warnings: false,
                            drop_console: true,
                            drop_debugger: true,
                            pure_funcs: ['console.log']
                        }
                    }
                })
            ],
            ...baseConfig
        }
    } else {
        return { ...baseConfig }
    }
}
複製代碼

將elementUI改成按需加載

這一塊官方坑比較大,花了比較久的時間

安裝按需引入插件

npm install babel-plugin-component -D
複製代碼

配置

這裏由於babel的升級,按element官方配置,會報錯,presets部分增長會報錯

module.exports = {
  presets: ['@vue/app'],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}
複製代碼

而後咱們開始修改main.js裏面的按需引入代碼

代碼來自官方文檔https://element.eleme.cn/#/zh-CN/component/quickstart#an-xu-yin-ru

import {
  Pagination,
  Dialog,
  Autocomplete,
  ....
} from 'element-ui'

Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Autocomplete)
.....

Vue.prototype.$loading = Loading.service;
Vue.prototype.$msgbox = MessageBox;
Vue.prototype.$alert = MessageBox.alert;
Vue.prototype.$confirm = MessageBox.confirm;
Vue.prototype.$prompt = MessageBox.prompt;
Vue.prototype.$notify = Notification;
Vue.prototype.$message = Message;
複製代碼

這裏重啓項目,會報錯

google了好久,終於找到了相似問題

Uncaught ReferenceError: _MessageBox is not defined,沒解決方案elementUI很是棒,做爲開發者很是感謝維護者大大們,可是麻煩官方也把出現的問題解決一下啊,這個issue多久了,仍是去年的,一點回復都沒有,官方案例又跑不通,同時社區形同虛設,隔壁Antd的gitter,在線聊天室維護者會回覆問題,Taro社區有微信羣,element的gitter就和只是用來聊天的gitter,全都是問題,卻沒有答案,這樣真的很差

問題解決

element改成按需引入後會報錯,來自vue-element-admin的issues,問題提出者的解決方案

親測可用

import {
  Pagination,
  Dialog,
  Autocomplete,
  ....
} from 'element-ui'

Vue.use(Pagination)
Vue.use(Dialog)
Vue.use(Autocomplete)
.....

Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = Vue.prototype.$msgbox.alert
Vue.prototype.$confirm = Vue.prototype.$msgbox.confirm
Vue.prototype.$prompt = Vue.prototype.$msgbox.prompt
Vue.prototype.$message = Message
複製代碼