背景
对于程序开发者而言,开发一个项目不仅仅注重效率和功能,前端的性能问题也是非常重要的。这直接影响用户的体验,从而间接的也反应该项目质量的好坏。 影响项目性能的原因有很多,如:资源文件的大小,业务的繁杂程度等,所以前端优化的方式也很多。这些东西很零碎,容易被人遗忘。
优化一: 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]\.";
广州包装设计公司http://www.maiqicn.com 电脑刺绣绣花厂 ttp://www.szhdn.com
优化六: 服务器缓存
为了提高服务器获取数据的速度,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;
}