Após a introdução de várias configurações de otimização de webpack no artigo anterior, continuei a aprender sobre várias soluções de otimização.
pré-carga/prefeito
Depois de usar Code Splita divisão de código, importa sintaxe de importação dinâmica é usada para carregar o código sob demanda, mas os usuários ainda se sentem presos ao encontrar recursos de arquivo único muito grandes. Queremos carregar os recursos que serão usados posteriormente quando o navegador estiver ocioso . você pode usar preloadeprefecth
pré-carga
preloadÉ um método de pré-carregamento, que declara ao navegador um recurso que precisa ser carregado antecipadamente, e o executa imediatamente quando o recurso é efetivamente utilizado, sem esperar pelo consumo da rede.
pré-busca
prefetchCarregamento preditivo; sua função é informar ao navegador um determinado recurso que poderá ser utilizado no futuro, e o navegador carregará o recurso correspondente quando estiver ocioso. Se o comportamento do usuário puder ser previsto, ele carregará o recurso que será usava. Seu uso é o mesmo que pré-carga.
terreno comum
- Carregará recursos e não executará
- tem um cache
- Existem certos problemas de compatibilidade
compatibilidade
A compatibilidade do preLoad é relativamente melhor do que a do prefetch e é recomendável usarpreLoad
Olhando para a compatibilidade dos dois métodos
uso
1. Instale
npm install --save-dev preload-webpack-plugin
2. Configuração
const PreloadWebpackPlugin = require('preload-webpack-plugin');
plugins: [.... new PreloadWebpackPlugin({ rel: 'preload', //定义链接类型include: 'script' // or 'style' 资源类型// rel:'prefecth' })
]
Os resultados empacotados são os seguintes
<link href="js/app.js" rel="preload" as="script" />
<link href="js/chunk-vendors.js" rel="preload" as="script" />
Core.js
Geralmente, o babel é usado para lidar com a compatibilidade Js, e as predefinições inteligentes @babel/preset-preset-env são usadas para lidar com problemas de compatibilidade. Ele pode compilar e converter algumas gramáticas do ES6, como funções de seta e operadores de extensão, mas não podem ser processadas funções assíncronas, alguns métodos de promessa de array de objetos, etc. Nosso código js ainda tem problemas de compatibilidade, então precisamos Core.jsadicionar js compatibilidade O problema está completamente resolvido.
O que é Core.js
core.js é um polyfill (patch) especialmente projetado para lidar com ES6 e APIs superiores
usar
1. Instale
npmi core-js
2. Configuração
- Modificar main.js
全量引入
import 'core-js'全量引入包的体积比较大
按需加载 比如只是用promise
import 'core-js/es/promise'
- Ou modifique o
babel.config.jsarquivo para importar automaticamente os módulos em core.js sob demanda
module.exports = {presets: [[ '@babel/preset-env',{corejs: 3,useBuiltIns: 'usage', },],],
}
PESO
O PWA permite que o projeto seja acessado offline, melhorando a confiabilidade do projeto.
usar
1. Instale o plug-in
npm install workbox-webpack-plugin --save-dev
2. Modifique a configuração do webpack
const WorkboxPlugin = require('workbox-webpack-plugin');new WorkboxPlugin.GenerateSW({ // 这些选项帮助快速启用 ServiceWorkers // 不允许遗留任何“旧的” ServiceWorkers clientsClaim: true,skipWaiting: true,}),
3. Modifique a configuração main.js para iniciar o 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)})})
}
//
Observe que no modo de desenvolvimento, você precisa instalá-lo novamente e serviceiniciar o servidor de desenvolvimento
Instalar
npm i serve
comando de execução
serve dist (dist为本地部署部署的目录)
Finalmente
Um pacote de informações de front-end está preparado para todos. Contém 54 e-books relacionados ao front-end 2,57G, "Coleção de entrevistas front-end (com respostas e análises)", tutoriais em vídeo de conhecimento difícil e chave (conjunto completo).
Amigos necessitados, você pode clicar no cartão abaixo para receber e compartilhar gratuitamente