Following the introduction of several webpack optimization configurations in the previous article, I continued to learn about several optimization solutions.
preload/prefecth
After using Code Splitcode splitting, importdynamic import syntax is used to load code on demand, but users still feel stuck when encountering single-file resources that are too large in size. We want to load the resources that will be used later when the browser is idle. you can use preloadandprefecth
preload
preloadIt is a preloading method, which declares to the browser a resource that needs to be loaded in advance, and executes it immediately when the resource is actually used, without waiting for network consumption.
prefetch
prefetchPredictive loading; its function is to tell the browser a certain resource that may be used in the future, and the browser will load the corresponding resource when it is idle. If the user's behavior can be predicted, it will load the resource that will be used. Its usage is the same as preload.
common ground
- Will load resources and not execute
- have a cache
- There are certain compatibility issues
compatibility
The compatibility of preLoad is relatively better than that of prefetch, and it is recommended to usepreLoad
Looking at the compatibility of the two methods
usage
1. Install
npm install --save-dev preload-webpack-plugin
2. Configuration
const PreloadWebpackPlugin = require('preload-webpack-plugin');
plugins: [.... new PreloadWebpackPlugin({ rel: 'preload', //定义链接类型include: 'script' // or 'style' 资源类型// rel:'prefecth' })
]
The packaged results are as follows
<link href="js/app.js" rel="preload" as="script" />
<link href="js/chunk-vendors.js" rel="preload" as="script" />
Core.js
Generally, babel is used to handle Js compatibility, and @babel/preset-preset-env smart presets are used to handle compatibility issues. It can compile and transform some grammars of ES6, such as arrow functions and extension operators, but async functions, some methods of promise object array includes, etc. cannot be handled. Our js code still has compatibility problems, so we need to Core.jsadd js compatibility The problem is completely solved.
What is Core.js
core.js is a polyfill (patch) specially designed to handle ES6 and above APIs
use
1. Install
npmi core-js
2. Configuration
- Modify main.js
全量引入
import 'core-js'全量引入包的体积比较大
按需加载 比如只是用promise
import 'core-js/es/promise'
- Or modify the
babel.config.jsfile to automatically import the modules in core.js on demand
module.exports = {presets: [[ '@babel/preset-env',{corejs: 3,useBuiltIns: 'usage', },],],
}
WEIGHT
PWA allows the project to be accessed offline, improving the reliability of the project.
use
1. Install the plugin
npm install workbox-webpack-plugin --save-dev
2. Modify webpack configuration
const WorkboxPlugin = require('workbox-webpack-plugin');new WorkboxPlugin.GenerateSW({ // 这些选项帮助快速启用 ServiceWorkers // 不允许遗留任何“旧的” ServiceWorkers clientsClaim: true,skipWaiting: true,}),
3. Modify the main.js configuration to start 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)})})
}
//
Note that in the development mode, you need to install it again and servicestart the development server
Install
npm i serve
run command
serve dist (dist为本地部署部署的目录)
At last
A front-end information package is prepared for everyone. Contains 54, 2.57G front-end related e-books, "Front-end Interview Collection (with answers and analysis)", difficult and key knowledge video tutorials (full set).
Friends in need, you can click the card below to receive and share for free