vue首屏優化方案

前言：最近用vue-cli 3.0 構建一個小型的工單管理系統，完工後build發現一個chunk-vendors包就達到985kb，加上其餘一些資源文件，首頁的下載總共大小快要2M。測試給的第一個反饋就是首屏慢慢慢慢慢！

根據首屏加載資源文件過大，進行一下優化：

1. 路由懶加載

結合Vue的異步組件再結合webpack的代碼分割，咱們能夠輕鬆的實現路由懶加載。

️vue-cli 3.0 模式就使用了Babel，咱們須要添加 syntax-dynamic-import 插件，才能使 Babel 能夠正確地解析語法。

// 安裝插件 syntax-dynamic-import
cnpm install --save-dev @babel/plugin-syntax-dynamic-import

// 修改babel.config.js
module.exports = {
  "presets": [
    "@vue/app"
  ],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      },
      "syntax-dynamic-import"
    ]
  ]
}

// 修改路由組件的加載（router/index.js）
{
  path: '/',
  name: 'home',
  component: resolve => require(['pages/Home'], resolve)
}

使用了路由懶加載，已經把原來的chunk-vendors降到了789kb，但加載789kb仍是太大。那繼續優化

2. 服務器開啓Gzip

Gzip是GNU zip的縮寫，顧名思義是一種壓縮技術。它將瀏覽器請求的文件先在服務器端進行壓縮，而後傳遞給瀏覽器，瀏覽器解壓以後再進行頁面的解析工做。在服務端開啓Gzip支持後，咱們前端須要提供資源壓縮包。

經過CompressionWebpackPlugin插件build提供壓縮

// 安裝插件
cnpm i --save-dev compression-webpack-plugin

// 在vue-config.js 中加入
const CompressionWebpackPlugin = require('compression-webpack-plugin');
const productionGzipExtensions = ['js', 'css'];
const isProduction = process.env.NODE_ENV === 'production';

.....
module.exports = {
....
  configureWebpack: config => {
    if (isProduction) {
      config.plugins.push(new CompressionWebpackPlugin({
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,
        minRatio: 0.8
      }))
    }
  }
}

如今咱們看一下build後的壓縮包的大小，大概減小了三分之二

 

build.jpg

3. 啓用CDN加速

用Gzip已把文件的大小減小了三分之二了，加載速度從以前2.7秒多到如今的1.8秒多，但這個仍是得不到知足。那咱們就把那些不太可能改動的代碼或者庫分離出來，繼續減少單個chunk-vendors，而後經過CDN加載進行加速加載資源。

// 修改vue.config.js 分離不經常使用代碼庫
module.exports = {
  configureWebpack: config => {
    if (isProduction) {
      config.externals = {
        'vue': 'Vue',
        'vue-router': 'VueRouter',
        'moment': 'moment'
      }
    }
  }
}
// 在public文件夾的index.html 加載

<!-- CND -->
<!--
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.runtime.min.js"></script>
-->
<script src="https://cdn.bootcss.com/vue/2.5.17/vue.runtime.min.js"></script>
<script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>

⚠️若是使用了餓了麼的element，不要使用beta版CDN，否則在日期組件上會遇到坑， 建議使用自家或者收費的CDN，保證CDN的可靠性
如今再build後看下大小和訪問速度：

 

CDN優化後.jpg

能夠看到chunk-verdors 又減小了114kb，經過CDN加載整個文檔速度已經接近1秒。

4. 修改uglifyOptions去除console來減小文件大小

// 安裝uglifyjs-webpack-plugin
cnpm install uglifyjs-webpack-plugin --save-dev

// 修改vue.config.js
  configureWebpack: config => {
    if (isProduction) {
      .....
      config.plugins.push(
        new UglifyJsPlugin({
          uglifyOptions: {
            compress: {
              warnings: false,
              drop_debugger: true,
              drop_console: true,
            },
          },
          sourceMap: false,
          parallel: true,
        })       
      )
    }
  }

若是代碼中打了很log，這個優化仍是有點效果的。

總結

首屏優化工做告一段落，經過以上四項的優化，已經很大的提高了首屏的加載速度。若是想再進一步優化仍是空間的，例如從代碼層面去減小代碼量（代碼複用率）。

 

 

 

 

1.大文件定位 
咱們可使用webpack可視化插件Webpack Bundle Analyzer 查看工程js文件大小，而後有目的的解決過大的js文件。 
安裝

npm install --save-dev webpack-bundle-analyzer
在webpack中設置以下，而後npm run dev的時候會默認在瀏覽器上打開

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  plugins: [
    new BundleAnalyzerPlugin()
  ]
}
 

2.JS文件按需加載 
若是沒有這個設置，項目首屏加載時會加載整個網站全部的JS文件，因此將JS文件拆開，點擊某個頁面時再加載該頁面的JS是一個很好的優化方法。 
這裏用到的就是vue的組件懶加載。在router.js中，不要使用import的方法引入組件，使用require.ensure。

import index from '@/components/index'
const index = r => require.ensure([],() => r(require('@/components/index'),'index'))
// 若是寫了第二個參數，就打包到該`JS/index`的文件中
// 若是不寫第二個參數，就直接打包在`JS`目錄下。
const index = r => require.ensure([],() => r(require('@/components/index')))

3.將JS文件放在body的最後 
默認狀況下，build後的index.html中，js的引入實在是在head中，使用html-webpack-plugin插件，將inject的值改成body。就能夠將js引入放到body最後。

var HtmlWebpackPlugin = require('html-webpack-plugin'); new HtmlWebpackPlugin({     inject:'body' }) 原文：https://blog.csdn.net/zjsfdx/article/details/80432793