vue.config.js:
1 UglifyPlugin Webpack Plugin 插件用来缩小js文件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
| const UglifyJsPlugin=require('uglifyjs-webpack-plugin') module.exports = { publicPath: process.env.NODE_ENV === 'production' ? '/Vue-chat/' : '/' , outputDir: 'dist', lintOnSave: true, chainWebpack: () => {}, configureWebpack:{ plugins:[ new UglifyJsPlugin({ uglifyOptions:{ compress:{ drop_debugger:true, drop_console:true, pure_funcs:['console.log'] } }, sourceMap:false, parallel:true }) ], }, productionSourceMap: true, parallel: require('os').cpus().length > 1, pwa: {}, devServer: { open: process.platform === 'darwin', disableHostCheck: true, port:8081, https: false, hotOnly: false, before: app => {} }, pluginOptions: { } }
|
2 路由懒加载:
把不同路由对应的组件分割成不同的代码块,待路由被请求的时候会单独打包路由,使得入口文件变小,加载速度大大增加,以函数的形式加载路由,这样就可以把各自的路由文件分别打包,只有在解析给定的路由时,才会加载路由组件
1 2 3 4 5 6
| routes:[{ path:'/', name:"通讯录", component:()=>Promise.resolve(import("../components/contact/contact.vue"))
},
|
3 UI框架按需加载
在日常使用的UI框架,例如element-plus,我们经常直接使用整个UI库
1
| import ElemtPlus from 'element-plus'
|
但实际上我用到的组件只有按钮,分页,表格,输入与警告,所以我们需要按需引用
1 2
| import {Button,Input,Table,TableColumn,MessageBox} from 'element-plus'
|
4 静态资源本地缓存
后端返回资源问题:
- 采用
HTTP
缓存,设置Cache-Control
,Last-Modified
,Etag
等响应头
- 采用
Service Worker
离线缓存
前端合理利用localStorage
5 图片资源的压缩
图片资源虽然不在编码过程中,但它却是对页面性能影响最大的因素
对于所有的图片资源,我们可以进行适当的压缩
对页面上使用到的icon
,可以使用在线字体图标,或者雪碧图,将众多小图标合并到同一张图上,用以减轻http
请求压力。
开启GZip压缩
拆完包之后,我们再用gzip
做一下压缩 安装compression-webpack-plugin
1
| npm i compression-webpack-plugin -D
|
vue.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14
| 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, deleteOriginalAssets: false })] } }
|
6 使用SSR
SSR(Server side ),也就是服务端渲染,组件或页面通过服务器生成html字符串,再发送到浏览器
从头搭建一个服务端渲染是很复杂的,vue
应用建议使用Nuxt.js
实现服务端渲染