Después de la introducción de varias configuraciones de optimización de paquetes web en el artículo anterior, continué aprendiendo sobre varias soluciones de optimización.
precarga/prefecto
Después de usar Code Splitla división de código, importse usa la sintaxis de importación dinámica para cargar el código a pedido, pero los usuarios aún se sienten atascados cuando encuentran recursos de un solo archivo que son demasiado grandes. Queremos cargar los recursos que se usarán más adelante cuando el navegador esté inactivo. Puedes usar preloadyprefecth
precarga
preloadEs un método de precarga, que declara al navegador un recurso que debe cargarse con anticipación y lo ejecuta inmediatamente cuando el recurso se usa realmente, sin esperar el consumo de la red.
captación previa
prefetchCarga predictiva, su función es decirle al navegador un determinado recurso que puede ser utilizado en el futuro, y el navegador cargará el recurso correspondiente cuando esté inactivo, si se puede predecir el comportamiento del usuario, cargará el recurso que será usó. Su uso es el mismo que el de precarga.
terreno común
- Cargará recursos y no ejecutará
- tener un caché
- Hay ciertos problemas de compatibilidad.
compatibilidad
La compatibilidad de preLoad es relativamente mejor que la de prefetch, y se recomienda usarpreLoad
Mirando la compatibilidad de los dos métodos.
uso
1. Instalar
npm install --save-dev preload-webpack-plugin
2. Configuración
const PreloadWebpackPlugin = require('preload-webpack-plugin');
plugins: [.... new PreloadWebpackPlugin({ rel: 'preload', //定义链接类型include: 'script' // or 'style' 资源类型// rel:'prefecth' })
]
Los resultados empaquetados son los siguientes
<link href="js/app.js" rel="preload" as="script" />
<link href="js/chunk-vendors.js" rel="preload" as="script" />
Core.js
En general, babel se usa para manejar la compatibilidad con Js, y los ajustes preestablecidos inteligentes @babel/preset-preset-env se usan para manejar los problemas de compatibilidad. Puede compilar y convertir algunas gramáticas de ES6, como funciones de flecha y operadores de extensión, pero no se pueden procesar las funciones asíncronas, algunos métodos de la matriz de objetos prometidos, etc.Nuestro código js aún tiene problemas de compatibilidad, por lo que necesitamos Core.jsagregar js compatibilidad El problema está completamente resuelto.
¿Qué es Core.js?
core.js es un polyfill (parche) especialmente diseñado para manejar API ES6 y superiores
utilizar
1. Instalar
npmi core-js
2. Configuración
- Modificar main.js
全量引入
import 'core-js'全量引入包的体积比较大
按需加载 比如只是用promise
import 'core-js/es/promise'
- O modifique el
babel.config.jsarchivo para importar automáticamente los módulos en core.js a pedido
module.exports = {presets: [[ '@babel/preset-env',{corejs: 3,useBuiltIns: 'usage', },],],
}
PESO
PWA permite acceder al proyecto sin conexión, mejorando la confiabilidad del proyecto.
utilizar
1. Instala el complemento
npm install workbox-webpack-plugin --save-dev
2. Modificar la configuración del paquete web
const WorkboxPlugin = require('workbox-webpack-plugin');new WorkboxPlugin.GenerateSW({ // 这些选项帮助快速启用 ServiceWorkers // 不允许遗留任何“旧的” ServiceWorkers clientsClaim: true,skipWaiting: true,}),
3. Modifique la configuración de main.js para iniciar serviceWork
// 在mains加上注册代码，serviceWorker判断兼容性问题兼容性较差
if ('serviceWorker' in navigator) {window.addEventListener('load', () => {navigator.serviceWorker.register('/service-worker.js').then((registration) => {console.log('SW registered: ', registration)}).catch((registrationError) => {console.log('SW registration failed: ', registrationError)})})
}
//
Tenga en cuenta que en el modo de desarrollo, debe instalarlo nuevamente e serviceiniciar el servidor de desarrollo
Instalar
npm i serve
ejecutar comando
serve dist (dist为本地部署部署的目录)
Por fin
Se prepara un paquete de información inicial para todos. Contiene 54, 2.57G e-books relacionados con front-end, "Colección de entrevistas de front-end (con respuestas y análisis)", tutoriales en video de conocimientos clave y difíciles (juego completo).
Amigos necesitados, puede hacer clic en la tarjeta a continuación para recibir y compartir gratis