vue + webpack 前端性能優化

時間 2019-11-06

原文原文鏈接

背景

對於程序開發者而言，開發一個項目不單單注重效率和功能，前端的性能問題也是很是重要的。這直接影響用戶的體驗，從而間接的也反應該項目質量的好壞。影響項目性能的緣由有不少，如：資源文件的大小，業務的繁雜程度等，因此前端優化的方式也不少。這些東西很零碎，容易被人遺忘。因此這篇文章中對我平時用的優化方式總結一下，可能不是太全面，你們有其它的優化方式能夠留言，互相交流下喲。不說了，麻溜的寫。。javascript

優化一： vue-router路由懶加載

懶加載：也叫延遲加載，即在須要的時候進行加載，隨用隨載。使用懶加載的緣由： vue是單頁面應用，使用webpcak打包後的文件很大，會使進入首頁時，加載的資源過多，頁面會出現白屏的狀況，不利於用戶體驗。運用懶加載後，就能夠按需加載頁面，提升用戶體驗。php

懶加載的寫法：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
   {
      path: '/',
      component: resolve => require(['@/components/DefaultIndex'],resolve),
      children: [
        {
          path: '',
          component: resolve => require(['@/components/Index'],resolve)
        },
        {
          path: '*',
          redirect: '/Index'
        }
      ]
})
複製代碼

非懶加載的路由配置：

import Vue from 'vue'
import Router from 'vue-router'
import DefaultIndex from '@/components/DefaultIndex'
import Index from '@/components/Index'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
   {
      path: '/',
      component: 'DefaultIndex ',
      children: [
        {
          path: '',
          component: 'Index'
        },
        {
          path: '*',
          redirect: '/Index'
        }
      ]
})
複製代碼

優化二：webpack壓縮圖片（減小圖片大小）

通常在vue項目中用webpack打包時，會根據webpack.base.conf.js中url-loader中設置limit大小來對圖片處理，對小於limit的圖片轉化爲base64格式，其他的不作操做。因此對有些較大的圖片資源，在請求資源的時候，加載會很慢，能夠用image-webpack-loader來壓縮圖片。css

安裝：

npm install image-webpack-loader --save-dev
複製代碼

配置：

在webpack.base.conf.js文件中引入配置（此項目我用的是腳手架搭建的，因此是webpack.base.conf.js）html

1: 引入：
require("image-webpack-loader")
2：配置：
  module: {
    rules: [
    ...(config.dev.useEslint ? [createLintingRule()] : []),
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options:   {
       loader: 'image-webpack-loader',
       options: {
        bypassOnDebug: true,
      }
    }
  },
或者也可配置爲：
{
  test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
  use:[
    {
    loader: 'url-loader',
    options: {
      limit: 10000,
      name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      loader: 'image-webpack-loader',
      options: {
        bypassOnDebug: true,
      }
    }
  ]
}
複製代碼

優化三：打包後的js過大，將js打包多個文件

因爲webpack打包後的js過大，以致於在加載資源時間過長。因此將文件打包成多個js文件，在須要的時候按需加載。前端

優化方案：

entry:{ 
 main:'xxx.js'
} 
plugins:{
 new commonsChunkPlugin({
 name:'commons',
 minChunks:function(module){
  // 下邊return參考的vue-cli配置
  // any required modules inside node_modules are extracted to vendor
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0
  )
 }
}) ,
// 如下才是關鍵
new commonsChunkPlugin({
 name:'charts',
 chunks:['commons'] 
 minChunks:function(module){
  return (
   module.resource &&
   /\.js$/.test(module.resource) &&
   module.resource.indexOf(
   path.join(__dirname, '../node_modules')
   ) === 0 && ['jquery.js', 'highcharts.js','echarts'].indexOf( module.resource.substr(module.resource.lastIndexOf('/')+1).toLowerCase() ) != -1
  )
 }
}) 
}
複製代碼

優化四：去掉沒必要要的插件

1：打包時，將一些沒必要要的插件能夠去掉，以防止打包一些無用的資源，致使打包後的文件過大，影響性能。vue

2：在引入第三方插件的時候，若是該插件的組件過大，能夠按需引入，如element-ui。java

3：使用webpack.optimize.UglifyJsPlugin插件壓縮混淆js代碼，使用方法以下：node

plugins: [//webpack.config.jsnew webpack.optimize.UglifyJsPlugin({ warnings: false,
    compress: {
        join_vars: true,
        warnings: false,
    },
    toplevel: false,
    ie8: false,
]
複製代碼

優化五： gzip壓縮

web前端項目，靜態資源放在cdn上比較多，gzip的壓縮是很是必要的，它直接改變了js文件的大小，減小兩到三倍。參考加速nginx: 開啓gzip和緩存，nginx的gzip配置很是簡單，在你對應的域名底下，添加下面的配置，重啓服務便可。gzip_comp_level的值大於2的時候並不明顯，建議設置在1或者2之間。jquery

# 開啓gzip
gzip on;
# 啓用gzip壓縮的最小文件，小於設置值的文件將不會壓縮
gzip_min_length 1k;
# gzip 壓縮級別，1-10，數字越大壓縮的越好，也越佔用CPU時間，後面會有詳細說明
gzip_comp_level 2;
# 進行壓縮的文件類型。javascript有多種形式。其中的值能夠在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
# 是否在http header中添加Vary: Accept-Encoding，建議開啓
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";
複製代碼

這種方法我沒有使用過，有用過的親，能夠留言，溝通一下下。webpack

優化六：服務器緩存

爲了提升服務器獲取數據的速度，nginx緩存着靜態資源是很是必要的。若是是測試服務器對html應該不設置緩存，而js等靜態資源環境由於文件尾部會加上一個hash值，這能夠有效實現緩存的控制。

location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
  access_log   off; 
  expires      30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
  access_log   off;
  expires      24h;
}
location ~* ^.+\.(html|htm)$ {
  expires      1h;
}
複製代碼