Vue 编码基础
2.1.1. 组件规范
2.1.2. 模板中使用简单的表达式
2.1.3 指令都使用缩写形式
2.1.4 标签顺序保持一致
2.1.5 必须为 v-for 设置键值 key
2.1.6 v-show 与 v-if 选择
2.1.7 script 标签内部结构顺序
2.1.8 Vue Router 规范
Vue 项目目录规范
2.2.1 基础
2.2.2 使用 Vue-cli 脚手架
2.2.3 目录说明
2.2.4注释说明
2.2.5 其他
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
在build文件夹下的webpack.base.conf.js中配置externals可以分离打包第三方资源包,key是依赖包的名称,value是源码抛出来的全局变量,这样打包后这些文件就不会打包到vendor.js 和app.js中,会大大减少打包体积。(尤其是你的项目用了多个三方库)
这个做法就是可以不把这些资源打包到bundle和vendor.js中,而是在运行时去获取需要的依赖和资源,大大减少打包的体积。
2、第三方库使用CDN引入
在项目开发中,我们会用到很多第三方库,如果可以按需引入,我们可以只引入自己需要的组件,来减少所占空间,但也会有一些不能按需引入,我们可以采用CDN外部加载,在index.html中从CDN引入组件,去掉其他页面的组件import,修改webpack.base.config.js,在externals中加入该组件,这是为了避免编译时找不到组件报错。
//这里是我再项目中的配置
//切记只适用于测试,要是上线一定是购买付费的
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" />
<script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script>
3、vue-router路由懒加载
这个是相当重要的一步,这步会大大减少打包后的体积,提升加载速度
在访问到相关页面才加载对应的路由和资源,才是正确的,否则全在初始化项目时加载,那么首屏时间就会很久。
举例说明:
路由懒加载模式配置
let routes = [
{
path: '/map', //地图
name: 'map',
component: resovle => require(['@/pages/map'],resovle),
meta: { noRequiresAuth: true },
},
{
path: '/redirectLogin', //支付回跳
name: 'redirectLogin',
component: resovle => require(['@/pages/site/redirectLogin'],resovle),
meta: { noRequiresAuth: true },
}
]
非----懒加载模式配置 router.js
配置
import Vue from 'vue'; //这句话可以直接删掉的,因为配置了externals
//import Router from 'vue-router';
//import login from '@/pages/site/login';
采用require方式代替import
const Router = require('vue-router');
const login = require('@/pages/site/login');
Vue.use(Router);
let routes = [
{
path: '/login', //登陆
name: 'login',
component: login,
meta: { noRequiresAuth: true },
},
]
4、静态资源压缩,代码压缩,图片压缩
(1)、开启gzip压缩,(这个需要服务端配合)
gzip压缩一定要开,并且服务端配合开一下,真的很重要。开启gzip后你会发现加载速度有质的提升,尤其是你的vendor.js
和app.js
体积过大的时候。
(2)、图片压缩,目前我才用的是阿里云的图片处理(付费的)效果比较好,或者有条件的话配置一台单独的图片服务器
(3)、尽量使用icon代替图片
(4)、 js代码压缩- - - -(webpack 自UglifyJsPlugin插件压缩js文件)
(5)、css 代码压缩- - - - (采用optimize-css-assets-webpack-plugin插件来压缩css代码)
5、不要滥用三方库
尽量一个项目只使用一个库,不要为了方便使用多个库而忽略了性能。
6、去掉编译中的map文件
为了避免部署打包体积过大,我们通常去掉源文件(就是打包后看不到源代码),打包后的体积会小很多,在config文件夹下的index.js文件中
module.exports = {
build: {
env: build_env,
index: path.resolve(__dirname, '../dist/index.html'),
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
productionSourceMap: false, //这个设置为false就是去掉源文件
// Gzip off by default as many popular static hosts such as Surge or Netlify
// already gzip all static assets for you. Before setting to `true`, make sure
// to: npm install --save-dev compression-webpack-plugin
productionGzip: true, //开启gzip
productionGzipExtensions: [
'js', 'css'
],
// Run the build command with an extra argument to View the bundle analyzer
// report after build finishes: `npm run build --report` Set to `true` or
// `false` to always turn it on or off
bundleAnalyzerReport: process.env.npm_config_report
},
}
7、代码层面的优化
(1)、项目组件化,去掉冗余的代码
(2)、正式环境去掉console.log
(3)、index.html页面中将js
文件放到页面最底部,css
文件放在<header>
中使用link引入。
这么做的原因是因为浏览器渲染的机制是自上而下的,如果把js文件放到头部渲染,等js文件渲染完成才开始绘制页面,这样速度会很慢,并且会受到css渲染的阻塞,所以要把js文件放到最底部
,并且一些没有关联性的文件可以采用异步加载
四、解决白屏,体验优化
上边已经讲述了优化问题,把 所 有 的 优 化 都 做 完 之 后 , 加 载 速 度 有 了 显 著 提 升,把所有的优化都做完之后,加载速度有了显著提升}把所有的优化都做完之后,加载速度有了显著提升把所有的优化都做完之后,加载速度有了显著提升,但是再网慢的时候还是会有白屏,所以再白屏期间加骨架屏和loading就显得格外重要了。
<body>
//这里亲测有效,放心使用
<div id="app">
// 我们只需要再这里添加loading图或者骨架屏,有人会说怎么控制它的显示隐藏啊,
#### 总结一下
面试前要精心做好准备,简历上写的知识点和原理都需要准备好,项目上多想想难点和亮点,这是面试时能和别人不一样的地方。
还有就是表现出自己的谦虚好学,以及对于未来持续进阶的规划,企业招人更偏爱稳定的人。
万事开头难,但是程序员这一条路坚持几年后发展空间还是非常大的,一切重在坚持。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**
为了帮助大家更好更高效的准备面试,特别整理了《前端工程师面试手册》电子稿文件。
![](https://img-blog.csdnimg.cn/img_convert/621960a57eb42479e02d6d64c0c81891.png)
![](https://img-blog.csdnimg.cn/img_convert/5230c48fd0fcb265f3401a21603bda2b.png)
**前端面试题汇总**
![](https://img-blog.csdnimg.cn/img_convert/42728594459506983a38ca2b86545fc6.png)