减小入口文件体积
使用路由懒加载,待路由被请求的时候再加载路由使得入口文件变小,加载速度大大增加。
在vue-router配置路由的时候,采用动态加载路由的形式,以函数的形式加载路由,只有在解析特定路由时,才会加载路由组件:
routes:[
path: 'Blogs',
name: 'ShowBlogs',
component: () => import('./components/ShowBlogs.vue')
]
静态资源本地缓存
后端返回资源:
- 采用HTTP缓存,设置Cache-Control,Last-Modified,Etag等响应头
- 采用Service Worker离线缓存
前端合理利用localStorage 。
UI库按需加载
不要直接导入整个UI库,如:
import ElementUI from 'element-ui'
Vue.use(ElementUI)
使用按需导入:
import { Button, Input, Pagination, Table, TableColumn, MessageBox } from 'element-ui';
Vue.use(Button)
Vue.use(Input)
Vue.use(Pagination)
重复组件打包
在webpack中,将常用的js文件单独抽离出来,放进公共依赖文件,避免重复加载组件。
在webpack.config.js文件中,修改CommonsChunkPlugin的值,minChunks为3表示会把使用3次及以上的包抽离出来,放进公共依赖文件,避免了重复加载组件:
minChunks: 3
图片资源压缩
icon文件,可以使用在线字体图标,或者使用精灵图,减轻http请求压力。
开启GZip压缩
在vue.congig.js中引入并修改webpack配置:
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
在服务器我们也要做相应的配置 如果发送请求的浏览器支持gzip,就发送给它gzip格式的文件。如果服务器是用express框架搭建的,只要安装一下compression就能使用:
const compression = require('compression')
app.use(compression()) // 在其他中间件使用之前调用
服务端渲染
SSR(Server side ),也就是服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器,在vue中可以使用Nuxt.js实现服务端渲染。
总结