lazy loading、pwa、多进程打包

lyz自学笔记

---

前言

lazy loading:懒加载，用到是就加载

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、lazy loading

	console.log('index.js文件被加载了~');
	
	// import { mul } from './test';
	
	document.getElementById('btn').onclick = function() {
	  // 懒加载~：当文件需要使用时才加载~
	  // 预加载 prefetch：会在使用之前，提前加载js文件 
	  // 正常加载可以认为是并行加载（同一时间加载多个文件）  
	  // 预加载 prefetch：等其他资源加载完毕，浏览器空闲了，再偷偷加载资源
	  import(/* webpackChunkName: 'test', webpackPrefetch: true */'./test').then(({ mul }) => {
	    console.log(mul(4, 5));
	  });
	};

---

二、pwa

渐进式网络开发应用程序（离线可访问）
workbox —> workbox-webpack-plugin
下载后使用

	    new WorkboxWebpackPlugin.GenerateSW({
	      /*
	        1. 帮助serviceworker快速启动
	        2. 删除旧的 serviceworker
	
	        生成一个 serviceworker 配置文件~
	      */
	      clientsClaim: true,
	      skipWaiting: true
	    })
	  ],

当这个插件帮我们生成一个serviceworker配置文件后，我们需要去入口文件中注册serviceworker

	/*
	  1. eslint不认识 window、navigator全局变量
	    解决：需要修改package.json中eslintConfig配置
	      "env": {
	        "browser": true // 支持浏览器端全局变量
	      }
	   2. sw代码必须运行在服务器上
	      --> nodejs
	      -->
	        npm i serve -g
	        serve -s build 启动服务器，将build目录下所有资源作为静态资源暴露出去
	*/
	// 注册serviceWorker
	// 处理兼容性问题
	if ('serviceWorker' in navigator) {
	  window.addEventListener('load', () => {
	    navigator.serviceWorker
	      .register('/service-worker.js')
	      .then(() => {
	        console.log('sw注册成功了~');
	      })
	      .catch(() => {
	        console.log('sw注册失败了~');
	      });
	  });
	}

---

三、多进程

可以使用多进程打包提高打包速度，多线程需要使用thread-loader
一般给babel使用

	{
	            test: /\.js$/,
	            exclude: /node_modules/,
	            use: [
	              /* 
	                开启多进程打包。 
	                进程启动大概为600ms，进程通信也有开销。
	                只有工作消耗时间比较长，才需要多进程打包
	              */
	              {
	                loader: 'thread-loader',
	                options: {
	                  workers: 2 // 进程2个
	                }
	              },
	              {
	                loader: 'babel-loader',
	                options: {
	                  presets: [
	                    [
	                      '@babel/preset-env',
	                      {
	                        useBuiltIns: 'usage',
	                        corejs: { version: 3 },
	                        targets: {
	                          chrome: '60',
	                          firefox: '50'
	                        }
	                      }
	                    ]
	                  ],
	                  // 开启babel缓存
	                  // 第二次构建时，会读取之前的缓存
	                  cacheDirectory: true
	                }
	              }
	            ]
	          },