|
<p>
以下方式基于 @vue/cli 快速搭建的交互式项目脚手架
</p><p>
<strong>
1. 路由懒加载
</strong>
</p><p>
当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
</p><p>
结合 Vue 的异步组件和 Webpack 的代码分割功能,轻松实现路由组件的懒加载。
</p><p>
<strong>
2. webpack动态导入
</strong>
</p><p>
将statically import(静态导入) 改为 dynamic import(动态导入)进行代码拆分
</p><p>
<strong>
3. 预取/预加载模块(prefetch/preload module)
</strong>
</p><p>
在声明 import 时,使用下面这些内置指令,可以让 webpack 输出 "resource hint(资源提示)",来告知浏览器:
</p><p>
prefetch(预取):将来某些导航下可能需要的资源
<br/>
preload(预加载):当前导航下可能需要资源
</p><p>
这会生成 <link rel="prefetch" href="login-modal-chunk.js"> 并追加到页面头部,指示着浏览器在闲置时间预取 login-modal-chunk.js 文件。
</p><p>
只要父 chunk 完成加载,webpack 就会添加 prefetch hint(预取提示)。
</p><p>
与 prefetch 指令相比,preload 指令有许多不同之处:
</p><p>
vue默认开启,可在vue.config.js中全局禁用prefetch,再针对指定模块开启。
</p><p>
<strong>
4. 添加Gzip打包配置(compression-webpack-plugin)
</strong>
</p><p>
yarn add compression-webpack-plugin -D
</p><p>
<strong>
5. 添加页面预渲染(prerender-spa-plugin)
</strong>
</p><p>
在单页应用程序中预呈现静态HTML,可以极大的提高网页访问速度,而且配合一些meat插件,基本可以满足SEO需求。
</p><p>
预渲染基本上是在启动无头浏览器,加载应用程序的路由并将结果保存到静态HTML文件中。然后将其与以前使用的任何静态文件服务解决方案一起使用,是无需更改代码或添加服务器端渲染的解决方法。
</p><p>
不过,它仅适用于HTML5 history,因为每个预渲染的路由都会生成一个对应的HTML,在hash模式下使用只会有一个HTML。
</p><p>
yarn add prerender-spa-plugin -D
</p><p>
prerender-spa-plugin 利用了 Puppeteer 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大,所以很简单就能将运行时的 HTML 打包到文件中。原理是在 Webpack 构建阶段的最后,在本地启动一个 Puppeteer 的服务,访问配置了预渲染的路由,然后将 Puppeteer 中渲染的页面输出到 HTML 文件中,并建立路由对应的目录。
</p><p>
<strong>
6. 压缩js,删除console(terser-webpack-plugin)
</strong>
</p><p>
yarn add terser-webpack-plugin -D
</p><p>
<strong>
7. bundle 分析(webpack-bundle-analyzer)
</strong>
</p><p>
将 bundle 内容展示为便捷的、交互式、可缩放的树状图形式。
</p><p>
yarn add -D webpack-bundle-analyzer
</p><p>
<strong>
8. WebP
</strong>
</p><p>
WebP(发音 weppy),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。
</p><p>
不过WebP目前在IOS上兼容性不好,可以使用JavaScript进行检测,对支持 WebP 的用户输出 WebP 图片。
</p><p>
记一次BUG:
</p><p>
在默认情况下,页面加载完成执行 this.checkWebpSupport() && document.documentElement.classList.add('webps'),没有问题。
</p><p>
但使用了prerender-spa-plugin进行预渲染后,因为执行预渲染的浏览器是支持WebP的,所有会直接在页面中加上'webps'类,所以即使浏览器不支持WebP,不执行此方法也会有该类名。
</p><p>
<strong>
9. 网页性能优化测试(googlespeed)
</strong>
</p><p>
进行网页测试,根据优化建议针对性的修改,提高网页加载速度。
</p><p>
https://www.googlespeed.cn/
</p><p>
原文链接:https://www.cnblogs.com/huliang56/p/11887957.html
</p> |
|