Webpack高级配置(2)

时间:2023-01-30 08:53:14

继上一篇文章介绍几种webpack优化配置后我继续了解了一下几种优化方案。

preload/prefecth

使用Code Split代码分割后,同时使用import 动态导入语法来进行代码按需加载,但是遇到体积过大的单文件资源那么用户还是会感觉卡顿,我们想在浏览器空闲的时候加载后续将要使用的资源,就可以使用preloadprefecth

preload

preload 是一种预加载的方式,它通过声明向浏览器声明一个需要提前加载的资源,当资源真正被使用的时候立即执行,就无需等待网络的消耗。

prefetch

prefetch预判加载; 它的作用是告诉浏览器未来可能会使用到的某个资源,浏览器就会在闲时去加载对应的资源,若能预测到用户的行为,加载将要用到的资源。它的用法跟 preload 是一样的.

共同点
  • 都会加载资源,并不执行
  • 都有缓存
  • 有一定的兼容性问题
兼容性

preLoad兼容性相较于prefetch来说相对好一些,推荐使用preLoad

在看看两种方式的兼容性 Webpack高级配置(2)

Webpack高级配置(2)
用法

1.安装

 npm install --save-dev preload-webpack-plugin 

2.配置

 const PreloadWebpackPlugin = require('preload-webpack-plugin');
 plugins: [.... new PreloadWebpackPlugin({ rel: 'preload', //定义链接类型include: 'script' // or 'style' 资源类型// rel:'prefecth' })
 ] 

打包好的结果如下

 <link href="js/app.js" rel="preload" as="script" />
 <link href="js/chunk-vendors.js" rel="preload" as="script" /> 
Core.js

一般使用babel对Js的兼容性进行了处理,其中@babel/preset-preset-env智能预设来处理兼容性问题。它能将ES6的一些语法进行编译转换比如箭头函数,扩展运算符,但是async函数,promise对象数组的一些方法includes等就没办法处理,我们的js代码依旧存在兼容性问题所以需要Core.js将js兼容性问题彻底解决。

Core.js是什么

core.js 是专门用来处理ES6及以上API的polyfill(补丁)

使用

1.安装

npmi core-js 

2.配置

  • 修改main.js
 全量引入
 import 'core-js'全量引入包的体积比较大
 
 按需加载 比如只是用promise
 import 'core-js/es/promise' 
  • 或修改babel.config.js文件达到自动按需引入core.js中的模块
module.exports = {presets: [[ '@babel/preset-env',{corejs: 3,useBuiltIns: 'usage', },],],
} 
PWA

PWA可以让项目在离线状态下访问,提高项目的可靠性。

使用

1.安装插件

npm install workbox-webpack-plugin --save-dev 

2.修改webpack配置

 const WorkboxPlugin = require('workbox-webpack-plugin');new WorkboxPlugin.GenerateSW({ // 这些选项帮助快速启用 ServiceWorkers // 不允许遗留任何“旧的” ServiceWorkers clientsClaim: true,skipWaiting: true,}), 

3.修改main.js配置 启动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)})})
}

// 

注意的是在开发模式下下需求再安装 service 启动开发服务器

安装

npm i serve 

运行命令

 serve dist (dist为本地部署部署的目录) 

最后

为大家准备了一个前端资料包。包含54本,2.57G的前端相关电子书,《前端面试宝典(附答案和解析)》,难点、重点知识视频教程(全套)。
Webpack高级配置(2)
Webpack高级配置(2)
Webpack高级配置(2)
有需要的小伙伴,可以点击下方卡片领取,无偿分享