2024年前端最全vue的一些优化方式(1)，2024年最新今日头条前端社招面试

最后

其实前端开发的知识点就那么多，面试问来问去还是那么点东西。所以面试没有其他的诀窍，只看你对这些知识点准备的充分程度。so，出去面试时先看看自己复习到了哪个阶段就好。

这里再分享一个复习的路线：（以下体系的复习资料是我从各路大佬收集整理好的）

《前端开发四大模块核心知识笔记》

最后，说个题外话，我在一线互联网企业工作十余年里，指导过不少同行后辈。帮助很多人得到了学习和成长。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

我意识到有很多经验和知识值得分享给大家，也可以通过我们的能力和经验解答大家在IT学习中的很多困惑，所以在工作繁忙的情况下还是坚持各种整理和分享。

export default {

data: () => ({

users: {}

}),

async created() {

const users = await axios.get(“/api/users”);

this.users = Object.freeze(users);

}

};

• 事件的销毁

Vue 组件销毁时，会自动清理它与其它实例的连接，解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。如果在 js 内使用 addEventListene 等方式是不会自动销毁的，我们需要在组件销毁时手动移除这些事件的监听，以免造成内存泄露，如

created() {

addEventListener(‘click’, this.click, false)

},

beforeDestroy() {

removeEventListener(‘click’, this.click, false)

}

• 图片资源懒加载

对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载， 等到滚动到可视区域后再去加载。这样对于页面加载性能上会有很大的提升，也提高了用户体验。我们在项目中使用 Vue 的 vue-lazyload 插件：

//安装插件

npm install vue-lazyload --save-dev

//在入口文件 man.js 中引入并使用

import VueLazyload from ‘vue-lazyload’

Vue.use(VueLazyload)

//或者添加自定义选项

Vue.use(VueLazyload, {

preLoad: 1.3,

error: ‘dist/error.png’,

loading: ‘dist/loading.gif’,

attempt: 1

})

//🤣在 vue 文件中将 img 标签的 src 属性直接改为 v-lazy ，从而将图片显示方式更改为懒加载显示：

• 路由懒加载

Vue 是单页面应用，可能会有很多的路由引入 ，这样使用 webpcak 打包后的文件很大，当进入首页时，加载的资源过多，页面会出现白屏的情况，不利于用户体验。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应的组件，这样就更加高效了。这样会大大提高首屏显示的速度，但是可能其他的页面的速度就会降下来。

const Foo = () => import(‘./Foo.vue’)

const router = new VueRouter({

routes: [

{ path: ‘/foo’, component: Foo }

]

})

• 第三方插件的按需引入

我们在项目中经常会需要引入第三方插件，如果我们直接引入整个插件，会导致项目的体积太大，我们可以借助 babel-plugin-component ，然后可以只引入需要的组件，以达到减小项目体积的目的。以下为项目中引入 element-ui 组件库为例：

//首先，安装 babel-plugin-component ：

npm install babel-plugin-component -D

//然后，将 .babelrc 修改为：

{

“presets”: [[“es2015”, { “modules”: false }]],

“plugins”: [

[

“component”,

{

“libraryName”: “element-ui”,

“styleLibraryName”: “theme-chalk”

}

]

]

}

//在 main.js 中引入部分组件：

import Vue from ‘vue’;

import { Button, Select } from ‘element-ui’;

Vue.use(Button)

Vue.use(Select)

• 优化无限列表性能

暂未了解

• 服务端渲染 SSR or 预渲染

服务端渲染是指 Vue 在客户端将标签渲染成的整个 html 片段的工作在服务端完成，服务端形成的 html 片段直接返回给客户端这个过程就叫做服务端渲染。

二、Webpack 层面的优化

😰Webpack 对图片进行压缩

在 vue 项目中除了可以在 webpack.base.conf.js 中 url-loader 中设置 limit 大小来对图片处理，对小于 limit 的图片转化为 base64 格式，其余的不做操作。所以对有些较大的图片资源，在请求资源的时候，加载会很慢，我们可以用 image-webpack-loader来压缩图片：

//首先，安装 image-webpack-loader ：

npm install image-webpack-loader --save-dev

//然后，在 webpack.base.conf.js 中进行配置：

{

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,

}

}

]

}

😰减少 ES6 转为 ES5 的冗余代码

Babel 插件会在将ES6代码转换成 ES5 代码时会注入一些辅助函数，例如下面的 ES6 代码：

class HelloWebpack extends Component{…}

这段代码再被转换成能正常运行的 ES5 代码时需要以下两个辅助函数：

babel-runtime/helpers/createClass // 用于实现 class 语法

babel-runtime/helpers/inherits // 用于实现 extends 语法

在默认情况下， Babel 会在每个输出文件中内嵌这些依赖的辅助函数代码，如果多个源代码文件都依赖这些辅助函数，那么这些辅助函数的代码将会出现很多次，造成代码冗余。为了不让这些辅助函数的代码重复出现，可以在依赖它们时通过 require('babel-runtime/helpers/createClass') 的方式导入，这样就能做到只让它们出现一次。babel-plugin-transform-runtime 插件就是用来实现这个作用的，将相关辅助函数进行替换成导入语句，从而减小 babel 编译出来的代码的文件大小。

//首先，安装 babel-plugin-transform-runtime ：

npm install babel-plugin-transform-runtime --save-dev

//然后，修改 .babelrc 配置文件为：

“plugins”: [

“transform-runtime”

]

插件的更多详细内容，可以查看官网babel-plugin-transform-runtime 的 详细介绍

😰提取公共代码

如果项目中没有去将每个页面的第三方库和公共模块提取出来，则项目会存在以下问题：

• 相同的资源被重复加载，浪费用户的流量和服务器的成本。

• 每个页面需要加载的资源太大，导致网页首屏加载缓慢，影响用户体验。

所以我们需要将多个页面的公共代码抽离成单独的文件，来优化以上问题 。Webpack 内置了专门用于提取多个Chunk 中的公共部分的插件 CommonsChunkPlugin，我们在项目中 CommonsChunkPlugin 的配置如下：

// 所有在 package.json 里面依赖的包，都会被打包进 vendor.js 这个文件中。

new webpack.optimize.CommonsChunkPlugin({

name: ‘vendor’,

minChunks: function(module, count) {

return (

module.resource &&

/.js$/.test(module.resource) &&

module.resource.indexOf(

path.join(__dirname, ‘…/node_modules’)

) === 0

);

}

}),

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

module.resource &&

/.js$/.test(module.resource) &&

module.resource.indexOf(

path.join(__dirname, ‘…/node_modules’)

) === 0

);

}

}),

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-peOHJKL9-1715511217112)]