vue + webpack 前端效能優化

Webpack Vue 效能優化 · 發表 2018-10-17 15:14:25

摘要：對於程式開發者而言，開發一個專案不僅僅注重效率和功能，前端的效能問題也是非常重要的。這直接影響使用者的體驗，從而間接的也反應該專案質量的好壞。影響專案效能的原因有很多，如：資原始檔的大小，業務的繁雜程度等，所以前端優化的方式也很多。這些東西很零碎，容易被人遺忘。所以這篇文章中對我平...

對於程式開發者而言，開發一個專案不僅僅注重效率和功能，前端的效能問題也是非常重要的。這直接影響使用者的體驗，從而間接的也反應該專案質量的好壞。影響專案效能的原因有很多，如：資原始檔的大小，業務的繁雜程度等，所以前端優化的方式也很多。這些東西很零碎，容易被人遺忘。所以這篇文章中對我平時用的優化方式總結一下，可能不是太全面，大家有其它的優化方式可以留言，互相交流下喲。不說了，麻溜的寫。。

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

懶載入： 也叫延遲載入，即在需要的時候進行載入，隨用隨載。使用懶載入的原因：vue 是單頁面應用，使用webpcak 打包後的檔案很大，會使進入首頁時，載入的資源過多，頁面會出現白屏的情況，不利於使用者體驗。運用懶載入後，就可以按需載入頁面，提高使用者體驗。

懶載入的寫法：

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 來壓縮圖片。

安裝：

npm install image-webpack-loader --save-dev
複製程式碼

配置：

在webpack.base.conf.js 檔案中引入配置（此專案我用的是腳手架搭建的，所以是webpack.base.conf.js ）

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：打包時，將一些不必要的外掛可以去掉，以防止打包一些無用的資源，導致打包後的檔案過大，影響效能。

2：在引入第三方外掛的時候，如果該外掛的元件過大，可以按需引入，如element-ui 。

3：使用webpack.optimize.UglifyJsPlugin 外掛壓縮混淆js程式碼，使用方法如下：

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

優化五： gzip壓縮

web前端專案，靜態資源放在cdn 上比較多，gzip 的壓縮是非常必要的，它直接改變了js 檔案的大小，減少兩到三倍。參考ofollow,noindex">加速nginx: 開啟gzip和快取，nginx 的gzip 配置非常簡單，在你對應的域名底下，新增下面的配置，重啟服務即可。gzip_comp_level 的值大於2 的時候並不明顯，建議設定在1或者2 之間。

# 開啟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]\.";
複製程式碼

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

優化六：伺服器快取

為了提高伺服器獲取資料的速度，nginx 快取著靜態資源是非常必要的。如果是測試伺服器對html 應該不設定快取，而js 等靜態資源環境因為檔案尾部會加上一個hash 值，這可以有效實現快取的控制。

location ~* ^.+\.(ico|gif|jpg|jpeg|png)$ { 
access_logoff; 
expires30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
access_logoff;
expires24h;
}
location ~* ^.+\.(html|htm)$ {
expires1h;
}
複製程式碼

好了，就總結到這裡了，這些優化的方法希望可以幫助到你們，其中優化五和優化六，我也沒有使用過，具體的可以再詳細的百度一下。你們如果有其它好的優化方式，可以和我分享一下。ღ( ´･ᴗ･` )比心