提高90%加載速度——vuecli下的首屏性能優化

時間 2019-11-08

標籤提高 90% 加載速度 vuecli 性能優化欄目系統性能简体版

原文原文鏈接

PS. （最近打算入駐掘金，之後就主要在這裏寫文章了，這兩天會挑本身寫過的文章，從新整理一下發到這裏來）css

前言

以前用vuecli作了個博客，是一個單頁面項目，大概有十個路由直接npm run build打包出來，有一個1M的巨大js文件html

先掛載到服務器上試試好傢伙這加載時間彷彿過了半個世紀vue

首屏頁面整整加載了9s 光加載那個大文件就花了8s 這必須得作個優化了，沒有用戶能忍受9s的白屏而不關閉頁面的webpack

過程當中，我還順便把項目從vuecli 2.x遷移到了vuecli 3，因此接下來還會介紹一些它們在優化上的異同web

分析

vuecli 2.x自帶了分析工具只要運行npm run build --reportvue-cli

若是是vuecli 3的話，先安裝插件express

cnpm install webpack-bundle-analyzer –save-dev
複製代碼

而後在vue.config.js中對webpack進行配置npm

chainWebpack: (config) => {
    /* 添加分析工具*/
    if (process.env.NODE_ENV === 'production') {
        if (process.env.npm_config_report) {
            config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
                .end();
            config.plugins.delete('prefetch')
        }
    } }
複製代碼

再運行npm run build --reportelement-ui

會在瀏覽器打開一個項目打包的狀況圖，便於直觀地比較各個bundle文件的大小瀏覽器

能夠看到項目中全部的依賴，全部的路由，都被打包進了同一個文件中

另外，在瀏覽器中，也能夠經過converge來查看代碼的使用情況

紅色的是下載了但未使用的部分

路由懶加載

當打包構建應用時，JavaScript包會變得很是大，影響頁面加載。若是咱們能把不一樣路由對應的組件分割成不一樣的代碼塊，而後當路由被訪問的時候才加載對應組件，這樣就更加高效了。

在一開始就下載完全部路由對應的組件文件，這明顯是不合適的，這就像下載一個app了，因此咱們就須要使用路由懶加載

在router.js文件中，原來的靜態引用方式

import ShowBlogs from '@/components/ShowBlogs'

routes:[ path: 'Blogs', name: 'ShowBlogs', component: ShowBlogs ]
複製代碼

改成

routes:[ path: 'Blogs',name: 'ShowBlogs',component: () => import('./components/ShowBlogs.vue')
複製代碼

以函數的形式動態引入，這樣就能夠把各自的路由文件分別打包，只有在解析給定的路由時，纔會下載路由組件

首屏須要加載的文件變成了橙色的部分，被小弟們分流出去了300k

若是是在vuecli 3中，咱們還須要多作一步工做由於vuecli 3默認開啓prefetch(預先加載模塊)，提早獲取用戶將來可能會訪問的內容在首屏會把這十幾個路由文件，都一口氣下載了因此咱們要關閉這個功能，在vue.config.js中設置參考官網的作法：

設置完畢後，首屏就只會加載當前頁面路由的組件了

element-ui按需加載

首屏加載的依賴包，其中 element-ui整整佔了 568k 本來的引進方式引進了整個包：

import ElementUI from 'element-ui'
Vue.use(ElementUI)
複製代碼

但實際上我用到的組件只有按鈕，分頁，表格，輸入與警告因此咱們要按需引用：

import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
Vue.prototype.$alert = MessageBox.alert
複製代碼

注意MessageBox註冊方法的區別，而且咱們雖然用到了alert，但並不須要引入Alert組件

在.babelrc文件中添加（vue-cli 3要先安裝babel-plugin-component)： plugins: [ [ "component", { "libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ]

element-ui小了不少，不過看到那個顯眼的 table.js後想到， table組件只有後臺管理頁面用到了，不須要全局註冊，因此咱們刪除 main.js中 Table和 TablColumn的引用，並在後臺組件中局部註冊

import { Table, TableColumn } from "element-ui";

components: {
    "el-table": Table,
    "el-table-column": TableColumn },
複製代碼

table就被拆分到了路由文件中

組件重複打包

能夠看到上圖，有兩個路由文件都引用了codemirror.js形成重複下載咱們能夠在webpack的config文件中，修改CommonsChunkPlugin的配置

minChunks: 3
複製代碼

把3改成2，就會把使用2次及以上的包抽離出來，放進公共依賴文件，不過因爲首頁也有複用的組件，因此首頁也會下載這個公共依賴文件

首頁下載了黃色和灰色部分拆了半天，又回到原點

固然，咱們能夠繼續折騰CommonsChunkPlugin的配置來解決這個問題但在新版webpack中，CommonsChunkPlugin被自由度更高，更高級的SplitChunksPlugin代替

這也是爲何我要把項目遷移到vuecli 3（使用webpack4）默認就作了優化，首頁只會下載灰色的部分（235K）

gzip

拆完包以後，咱們再用gzip作一下壓縮安裝compression-webpack-plugin

cnmp i compression-webpack-plugin -D
複製代碼

在vue.congig.js中引入並修改webpack配置

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

configureWebpack: (config) => {
        if (process.env.NODE_ENV === 'production') {
            // 爲生產環境修改配置...
            config.mode = 'production'
            return {
                plugins: [new CompressionPlugin({
                    test: /\.js$|\.html$|\.css/, //匹配文件名
                    threshold: 10240, //對超過10k的數據進行壓縮
                    deleteOriginalAssets: false //是否刪除原文件
                })]
            }
        }
複製代碼

能夠看到 200k以上的文件被壓縮到了 100k之內

在服務器咱們也要作相應的配置若是發送請求的瀏覽器支持gzip，就發送給它gzip格式的文件個人服務器是用express框架搭建的只要安裝一下compression就能使用

const compression = require('compression')
app.use(compression())
複製代碼

注意，後面這一句，要放在全部其餘中間件註冊以前

最終效果

首屏加載資源198k，加載時間1s， 相比原來速度提高了90%

後記：css是否要拆分

vuecli 3和vuecli2.x還有一個區別是 vuecli 3會默認開啓一個css分離插件 ExtractTextPlugin 每個模塊的css文件都會分離出來，整整13個css文件，而咱們的首頁就請求了4個，花費了很多的資源請求時間咱們能夠在vue.config.js中關閉它

css: {
    // 是否使用css分離插件 ExtractTextPlugin
    extract: false,
    // 開啓 CSS source maps?
    sourceMap: false,
    // css預設器配置項
    loaderOptions: {},
    // 啓用 CSS modules for all css / pre-processor files.
    modules: false
},
複製代碼