面试之性能优化与webpack的打包流程

面试之性能优化

css性能优化方面

首屏内联样式

因为内联样式的时候，浏览器再加载html的时候，也一并加载了内联样式，这样就会减少首页白屏的效果。

减少使用@import引入css

• 尽量减少使用@import引入css
  • 因为浏览器再引入这个 css的 时候，会阻塞进程，先加载 @import引入的css，加载完毕后，再继续后续的进程

设置内容缓存

• 将HTML内容设置Cache-Control 或Expires可以将HTML内容缓存起来，避免频繁向服务器端发送请求;
  • < meta http-equiv=“Cache-Control” />

优化重排和重绘

• 减少重排
  • 减少通过dom节点去操作 css样式等
    • 内外边距
    • JS获取DOM元素的位置相关属性（如width/height/left等）
    • 使用Flex时，比使用inline-block和float时重排更快，
      所以在布局时可以优先考虑Flex
• 减少重绘
  • 元素的外观（如color，background，visibility等属性）发生改变时，会触发重绘，尽量减少这类操作

减少使用高性属性：浮动、定位，推荐使用flex布局

动画方面

• 尽量使用 transform 转化属性去实现相关动画，而不是使用定位 left right等形式

js性能优化方面

使用cdn的方式引入 console.log （h5方面）

对数据进行缓存

• http相关请求的缓存，同一个接口查询的数据一致时，使用缓存的数据（后端处理）
• 使用浏览器缓存，使用localStorage sessionStorage cookie相关存储，去缓存数据，避免再一次加载页面时候，重新请求数据

防抖

节流

路由的懒加载

• 就是打包的时候，会打包成一个单独的文件（打包出来的文件被称为chunk ）

component: () => import("../views/profile/Profile.vue")

首屏加载显示白屏优化

• 可假如屏保，就是在一开始加载整个程序的时候，添加一个屏保，模拟出正在加载过程
• 可假如骨架屏
• 首页的直接引入，其他路由进行路由懒加载形式导入

vue项目上的优化

• 01：尽量减少data中的数据，data中的数据都会增加getter和setter，会收集对应的watcher
• 02：v-if 和 v-for 不要同时使用
• 03：

webpack相关配置 ( vue-cli )

图片转化为base64 （url-loader）

图片的压缩 （image-webpack-loader）

把es6语法转化为es5语法等（babel-loader）

gzip压缩 打包的文件大小 - compression-webpack-plugin

js代码的压缩 （uglifyjs-webpack-plugin）

• 设置清除log，去掉注释，去掉debugger

配置别名 （chainWebpack里面 config.resolve.alias）代码切片

设置生产环境，不生成map文件追踪错误 （ productionSourceMap: false ）

使用CDN加速优化 （ vue路由等）

webpack相关配置

• 五大模块
  • enter、output、mode、loader、plugin

webpack01之 base.js

入口：entry => 一般来说 是 src/ main.ts
出口：output
可配置的 path filename 打包的路径

loader相关 module - rules
1：scss、css相关loader
=> vue-style-loader
=> css-loader
=> postcss-loader - 需要 postcss.config.js 配置 自动引入浏览器前缀、还有浏览器版本限制（ package.json - browserslist ）
=> sass-loader
2：js
=>babel-loader 需要 babel.config.js 里面配置预设等
=>thread-loader多线程
=>exclude: /node_modules/ 排除node的解析
3：ts
=>babel-loader
4：vue
=>vue-loader

resolve相关
1：extensions 配置文件名后缀可省略
2：alias 配置别名

plugins相关
1：html-webpack-plugin 自动引入文件 插件
2：clean-webpack-plugin 清除上次打包缓存
3：webpack 下的 ProgressPlugin 进度条
4：vue-loader 下的 VueLoaderPlugin 插件
5：unplugin-auto-import/webpack、unplugin-vue-components/webpack、unplugin-vue-components/resolvers 自动引入插件

webpack02之 dev.js

1：mode: ‘development’,
2：devtool: ‘eval-cheap-module-source-map’, //开发环境配置 定位错误根源
3：eslint-webpack-plugin
4：cache 缓存 type: ‘memory’
5：devServer 服务器设置 端口、服务器代理等

webpack03之 pro.js

1：cache 缓存 type: ‘filesystem’,
2：optimization
=>minimizer - CssMinimizerPlugin 、TerserPlugin（ 去log等 ）
css-minimizer-webpack-plugin、terser-webpack-plugin
=>splitChunks 代码切片 （ vue、ele、loadsh单独切片为js ）
3：zip-webpack-plugin 打包后 压缩为 zip文件
4：copy-webpack-plugin 负责静态资源等

webpack的打包流程

• webpack的打包流程就是把项目中的各个模块打包成静态资源，以便于在浏览器中加载与运行。

流程：

1：读取配置文件

webpack打包时先读取webpack.config.js文件，解析其中的配置信息，根据不同的环境执行打包。

2：找到入口文件

在解析配置文件后，webpack会寻找到入口文件(main.js或者index.js)，根据入口文件开始相关递归地解析所有依赖关系

3：解析依赖模块

从入口文件找到找到依赖关系，执行对于的依赖模块，比如js文件，css文件，图片等资源，根据不同的loading或者plugin加载这些资源

4：编译模块

webpack使用loading来编译依赖模块，执行css效果，js转义，js压缩、提取公共代码等效果

5：合并模块

webpack编译完毕后，会把所有模块合并成一个bundle.js文件

6：输出文件

webpack最后根据output配置输出打包后的文件到指定目录下，用于浏览器加载与运行

loader与plugin的区别

loader: 是用来处理非JavaScript文件，eg：把ts转换为js，jsx转换为js，less转换为css，图标转换为base64等
  loader是再模块加载时对其进行转换，因此可以立即为一个转换器。

plugin：是用来处理各种任务的，eg：打包优化，自动创建html与自动导入bundle.js文件、资源管理、变量注入、清理输出目录、压缩js代码等操作。
 plugin是通过监听webpack的生命周期事件来执行对应的任务。