性能优化

(具体看前端详细点的性能优化)

代码优化
    尽量减少 data 中的数据，data 中的数据都会增加 getter 和 setter，会收集对应的 watcher
    v-if 和 v-for 不能连用
    如果需要使用 v-for 给每项元素绑定事件时使用事件代理
    SPA 页面采用 keep-alive 缓存组件
    在更多的情况下，使用 v-if 替代 v-show
    key 保证唯一
    requestAnimationFrame处理频繁渲染,避免卡顿
    webWorker 开启单独线程处理时间很长的代码
    
    
SEO 优化
    采用http2代替http1.1 (可管道复用,请求头压缩,响应时额外推送信息)
    预渲染 (使用async/defer script提前加载js)
    服务端渲染 SSR
    使用缓存(客户端缓存、服务端缓存)
    使用路由懒加载、异步组件
    防抖、节流
    第三方模块按需导入
    长列表滚动到可视区域动态加载
    图片懒加载
​
打包优化
    压缩代码,服务端开启 gzip 压缩等。
    Tree Shaking/Scope Hoisting
    使用 cdn 加载第三方模块
    多线程打包 HappyPack开启多线程打包
    splitChunks 抽离公共文件
    sourceMap 优化
​
用户体验
    骨架屏
    PWA

//造成首屏缓慢的点分为I/O阻塞,DOM渲染和性能

//I/O阻塞(分为减少包体积,请求优化,资源懒加载)
//减少包体积
    JavaScript：UglifyjsPlugin 
    CSS ：MiniCssExtractPlugin(提取css为单独文件) OptimizeCSSAssetsPlugin(压缩css)
    HTML：HtmlWebpackPlugin
    gzip：开启 gzip 压缩(一种压缩算法,减少传输的资源量)，通常开启 gzip 压缩能够有效的缩小传输资源的大小。
    压缩图片：可以使用 image-webpack-loader，在用户肉眼分辨不清的情况下一定程度上压缩图片
    树摇
    使用 svg 图标：相对于用一张图片来表示图标，svg 拥有更好的图片质量，体积更小，并且不需要开启额外的 http 请求
    合理使用第三方库：对于一些第三方 ui 框架、类库，尽量使用按需加载，减少打包体积
    
//请求优化
    请求优化：将第三方的类库放到 CDN 上，能够大幅度减少生产环境中的项目体积，另外 CDN 能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。
    缓存：将长时间不会改变的第三方类库或者静态资源设置为强缓存，将 max-age 设置为一        个非常长的时间，再将访问路径加上哈希达到哈希值变了以后保证获取到最新资源，好的缓存策略有助于减轻服务器的压力，并且显著的提升用户的体验    
    http2：如果系统首屏同一时间需要加载的静态资源非常多，但是浏览器对同域名的 tcp 连接数量是有限制的(chrome 为 6 个)超过规定数量的 tcp 连接，则必须要等到之前的请求收到响应后才能继续发送，而 http2 则可以在多个 tcp 连接中并发多个请求没有限制，在一些网络较差的环境开启 http2 性能提升尤为明显。
    
//资源懒加载
​    懒加载：当 url 匹配到相应的路径时，通过 import 动态加载页面组件，这样首屏的代码量会大幅减少，webpack 会把动态加载的页面组件分离成单独的一个 chunk.js 文件
    图片懒加载：使用图片懒加载可以优化同一时间减少 http 请求开销，避免显示图片导致的画面抖动，提高用户体验

//DOM渲染
    虚拟列表,图片懒加载等各种懒加载

//代码性能优化
    预渲染：由于浏览器在渲染出页面之前，需要先加载和解析相应的 html、css 和 js 文件，为此会有一段白屏的时间，可以添加loading，或者骨架屏幕尽可能的减少白屏对用户的影响体积优化
    使用可视化工具分析打包后的模块体积：webpack-bundle- analyzer 这个插件在每次打包后能够更加直观的分析打包后模块的体积，再对其中比较大的模块进行优化​
    提高代码使用率：利用代码分割，将脚本中无需立即调用的代码在代码构建时转变为异步加载的过程
    封装：构建良好的项目架构，按照项目需求就行全局组件，插件，过滤器，指令，utils 等做一 些公共封装，可以有效减少我们的代码量，而且更容易维护资源优化

Webpack 性能优化模块与代码示例

优化方法	代码示例	作用描述
多线程打包	javascript const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimizer: [ new TerserPlugin({ parallel: true, // 开启多线程 }), ], }, };	利用多核 CPU 并行处理任务，加快代码压缩和打包速度。
代码分割	javascript module.exports = { optimization: { splitChunks: { chunks: 'all', }, }, };	将代码拆分为多个 chunk，按需加载，减少初始加载时间。
Tree Shaking	javascript module.exports = { mode: 'production', optimization: { usedExports: true, }, };	移除未使用的代码，减少打包体积。
缓存	javascript module.exports = { cache: { type: 'filesystem', }, };	缓存构建结果，避免重复构建，提升二次构建速度。
懒加载	javascript const LazyComponent = () => import('./LazyComponent');	延迟加载非核心模块，减少初始加载时间。
压缩代码	javascript const TerserPlugin = require('terser-webpack-plugin'); module.exports = { optimization: { minimize: true, minimizer: [new TerserPlugin()], }, };	压缩 JavaScript 代码，减少文件体积。
图片压缩	javascript const ImageMinimizerPlugin = require('image-minimizer-webpack-plugin'); module.exports = { plugins: [ new ImageMinimizerPlugin({ minimizer: { implementation: ImageMinimizerPlugin.imageminMinify, options: { plugins: ['imagemin-optipng'], }, }, }), ], };	压缩图片资源，减少文件体积。
预加载与预获取	javascript import(/* webpackPreload: true */ './PreloadModule'); import(/* webpackPrefetch: true */ './PrefetchModule');	提前加载或获取资源，优化用户体验。
模块热替换 (HMR)	javascript module.exports = { devServer: { hot: true, }, };	在开发环境下，实现模块热替换，提升开发效率。
外部扩展 (Externals)	javascript module.exports = { externals: { lodash: '_', }, };	将第三方库从打包中排除，通过外部引入，减少打包体积。

组件发布流程

1. 为组件指定入口文件：在每个包下的 package. Json 文件中添加 main (require 命令的入口) 和 module (import 命令的入口) 属性，指定组件的入口文件。
2. 设置环境变量：利用工具（如 cross-env）设置环境变量，区分开发环境和生产环境。
3. 添加打包配置文件：在项目的根目录下添加构建配置文件（如 rollup. Config. Js），配置构建和打包的相关参数。
4. Npm config set registry=私库地址/
5. 开发组件
6. Npm publish npm 会根据 package. Json 文件中的 files 字段来决定哪些文件应该被包含在发布的包中。如果 files 字段不存在，npm 会默认包含除了被 .npmignore 或 .gitignore 文件排除之外的所有文件。