Webpack高级配置（2）

Webpack高级配置（2） 前端开发小司机 于2023-01-28 16:33:46发布 284 收藏 文章标签： webpack 前端 javascript

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

preload/prefecth

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

preload

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

prefetch

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

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

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

在看看两种方式的兼容性

用法

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的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。 有需要的小伙伴，可以点击下方卡片领取，无偿分享