沐鳴主管:_vue + webpack 前端性能優化
背景
對於程序開發者而言,開發一個項目不僅僅注重效率和功能,前端的性能問題也是非常重要的。這直接影響用戶的體驗,從而間接的也反應該項目質量的好壞。 影響項目性能的原因有很多,如:資源文件的大小,業務的繁雜程度等,所以前端優化的方式也很多。這些東西很零碎,容易被人遺忘。
優化一: 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 文件的大小,減少兩到三倍。 參考 加速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_log off;
expires 30d;
}
location ~* ^.+\.(css|js|txt|xml|swf|wav)$ {
access_log off;
expires 24h;
}
location ~* ^.+\.(html|htm)$ {
expires 1h;
}
出處:https://juejin.im/post/5bc5c106e51d450e7a253e1b
站長推薦
1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲
2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入
鏈接: http://www.fly63.com/article/detial/7224