1.静态和动态导入默认情况下，我们静态导入的所有模块都会添加到初始bundle中。使用默认ES2015导入语法导入的模块将被静态导入。importmodulefrom'module'其实我们可以动态导入需要显示的组件import("b.vue").then()//动态导入会在打包的时候自动chunk如上图，点击emoji时，表情符号选择器组件已加载。动态路由和动态组件会自动拆分bundle。2.可见性导入除了用户交互，我们通常会有在初始页面不可见的组件。一个很好的例子是延迟加载图像，它们在视口中不直接可见，但仅在用户向下滚动后加载。3.Importoninteraction(lazyloading)当用户与需要它的UI交互时，延迟加载非关键资源您的页面可能包含不是立即需要的组件或资源的代码或数据。例如，用户无法看到用户界面的某些部分，除非他们单击或滚动浏览页面的某些部分。例如模态框、列表详情页、视频播放器或聊天小部件、第三方资源等。与其立即加载这些资源，不如在更合适的时刻加载，比如：当用户第一次点击时与组件交互在交互时将组件滚动到视图中或延迟加载组件直到浏览器空闲（通过requestIdleCallbackAPI）。加载资源的不同方式总结如下：立即加载资源（加载脚本的正常方式）延迟（路由）——当用户导航到路由或组件时加载延迟（交互）——当用户点击UI时加载（比如显示聊天）Lazy(inviewport)-当用户滚动到组件时加载Prefetchsplit根据当前路由动态加载组件{path:"/home",component:()=>import(/*webpackChunkName:"home"*/"@/components/layout/Index.vue"),children:[//todo],},5.Bundlesplitting将代码拆分成可重用的块在bundle中，当用户访问网站时，bundle被请求并加载以便在用户屏幕上显示数据。包越大，浏览器引擎到达第一个渲染调用所在的行所需的时间就越长。在此之前，用户必须盯着空白屏幕看相当长一段时间，这可能……非常令人沮丧！我们希望尽快将数据显示给用户。较大的捆绑包会导致加载时间、处理时间和执行时间增加。如果我们可以减小这个包的大小以加快速度，那就太好了。六、中断器模式通过预缓存、延迟加载和最小化往返来优化初始加载。当我们要访问一个网站时，首先要向服务器发出请求，获取这些资源。入口点指向的文件是从服务器返回的，这通常是我们应用程序的初始HTML文件！浏览器的HTML解析器一开始从服务器接收数据就开始解析该数据。如果解析器发现需要更多资源（例如样式表或脚本），它会向服务器发送另一个HTTP请求以获取这些资源！Ticker模式侧重于四个主要的性能考虑因素：有效地推送关键资源，最大限度地减少到服务器的往返行程并减少加载时间。尽早渲染初始路由，提升用户体验将频繁访问的路由在后台预缓存资源，减少对服务器的请求量，实现更好的离线体验Lazilyload不常访问的路由或资源VII.TreeShaking通过消除无用代码来减少包的大小可以消除这些死代码以减小包的大小并防止不必要地加载更多数据！在将死代码添加到我们的包之前，消除死代码的过程称为tree-shaking。8.Preload在找到关键资源之前通知浏览器（意思是关键资源加载完成后，再加载预加载的资源。）methodwebpackPreload:truemethod(Webpack4.6.0+)constEmojiPicker=import(/*webpackPreload:true*/"./EmojiPicker");九、Prefetch获取并缓存可能即将被请求的资源（意思是关键资源加载完成后，prefetch资源可以不加载，也可以等到特定需要才加载）方法webpackPrefetch：true方法constEmojiPicker=import(/*webpackPrefetch:true*/"./EmojiPicker");10.VirtualList这是只渲染动态列表中可见内容的行而不是整个列表的思想。呈现的行只是完整列表的一小部分，可见内容（窗口）随着用户滚动而移动。这可以提高渲染性能。11、压缩脚本，减少脚本通过网络传输的时间1、gzip和Brotli是目前浏览器支持的最常用的两种压缩js方式（需要配合nginx配置使用）2、Brotli处于类似的压缩方式level3.如果你使用webpack打包你的代码，你可以使用CompressionPlugin压缩到gzip或使用BrotliWebpackPlugin压缩到brotli，如果你使用rollup，那么使用rollup-plugin-gzip插件4.从Gzip压缩切换进行Brotli压缩，文件大小会减少15%-25%左右。5.compress(a+b)<=compress(a)+compress(b)-单个大包将提供比多个小包更好的压缩HTTP数据压缩可以用不同的方式分类。其中之一是有损与无损。有损压缩意味着压缩-解压缩循环会导致文档发生轻微变化，同时保持其可用性。最终用户几乎不会注意到这种变化。有损压缩的最常见示例是图像的JPEG压缩。使用无损压缩，压缩和后续解压缩后恢复的数据将与原始数据完全匹配。PNG图像是无损压缩的一个示例。无损压缩与文本传输有关，应该应用于基于文本的格式，如HTML、CSS和JavaScript。有多种工具可用于缩小HTML、CSS和JS资源。Terser是ES6+中流行的JavaScript缩小器，默认情况下Webpack包含一个用于此库的插件来创建缩小的构建文件。您还可以使用esbuild压缩，这是一种比terser更快的压缩方法。可以快10-100倍静态和动态缩小可以帮助显着减小文件大小，但缩小后的JS可以提供更显着的收益。服务器端压缩可以通过两种方式实现。静态压缩：您可以使用静态压缩对资产进行预压缩，并在构建过程中提前保存。包装时常用于压缩。比如webpack或者rollup打包的时候，提前压缩成gzip，然后放到nginx上，配置gzip_static:on；这样当一个http请求时，就会得到gzip文件，然后浏览器解压并显示页面。动态压缩：通过这个过程，压缩在浏览器请求资源时动态发生。它常用于接口中的数据压缩。当请求接口时，服务器动态压缩数据返回给浏览器。Gzip和Brotli算法Gzip压缩格式已经存在了将近30年，是一种基于Deflate算法的无损算法。Deflate算法本身使用了LZ77算法和霍夫曼编码的组合。LZ77算法识别重复的字符串并用反向引用替换它们，反向引用是指向其先前出现的指针，后跟字符串的长度。随后，霍夫曼编码识别常用的参考，并用具有较短位序列的参考替换它们。较长的位序列用于表示不常用的引用。所有主流浏览器都支持Gzip。Brotli2015年，谷歌推出了Brotli算法和Brotli压缩数据格式。和GZip一样，Brotli也是一种基于LZ77算法和霍夫曼编码的无损算法。此外，它使用二阶上下文建模以相似的速度产生更密集的压缩。上下文建模是一种允许同一块中的同一字母表具有多个霍夫曼树的功能。Brotli还支持更大的反向引用窗口大小，并具有静态字典。这些特性有助于提高其作为压缩算法的效率。Brotli目前得到所有主要服务器和浏览器的支持，并且越来越受欢迎。比较gzip和brotli下表显示了不同压缩级别下Brotli和Gzip压缩率和速度的基准比较。启用压缩webpack配置module.exports={//...plugins:[//...newCompressionPlugin()]}在Nginx服务器等HTTP代理上启用它{listen8080;服务器名称本地主机；#需要http_gzip_static_module模块gzip_staticon;location/{别名html索引index.htmlindex.htm;try_files$uri$uri//html/index.html;}}浏览器通过请求中的Accept-EncodingHTTPheader传达其支持的压缩算法，这表明浏览器支持Gzip和brotliAccept-Encoding:gzip,br服务器将返回一个Content-EncodingHTTP响应头来表明响应中使用的压缩算法。例如，内容编码：br
