webpack自我提升 - 优化篇(2)

1、树摇 tree shaking

　　在应用程序中去除没有使用的代码，使代码的体积更小

　　前提：

　　　　1、必须使用ES6模块

　　　　2、开启production环境

　　配合package.json使用

　　　　package.json中配置：

　　　　　　"sideEffects":false , 　　//表示所有代码都没有副作用（都可以进行tree shaking）

　　　　出现的问题：可能会把css/ @babel/polyfill(副作用)文件干掉

　　应配置为

　　　　"sideEffect":["*.css"],　//表示不会摇.css结尾的文件

 

2、code split 代码分割　

　　单入口和多入口，会提取公共文件，单独打包成一个chunk

　　optimization:{

　　　　splitChunks:{

　　　　　　chunks:"all"

　　　　}

　　}

　　1、可以将node_module中代码单独打包一个chunk最终输出

　　2、自动分析单入口/多入口chunk中，有没有公共文件，如果有公共文件则会打包成单独一个chunk

 

　　其他js代码，让某个文件被单独打包成一个chunk

　　import 动态导入语法：能将某个文件单独打包

　　Exp:

　　　　import (/*webpackChunkName: "test"*/"./test")

　　　　　　.then()

　　　　　　.catch()

 

3、懒加载与预加载

　　懒加载：当文件需要使用时才加载；(影响：若太大，首次触发会稍有延迟，例如，点击时加载，太大，会有延迟感)

　　正常加载：并行加载（同一时间加载多个文件，但是同一时间并行加载的数量是有限制的）

　　预加载：会在使用前，提前加载多个js文件；等其他资源加载完毕，浏览器空闲了，再偷偷加载资源（兼容性不好，慎用）

　　Exp:

　　　　document.getElementById("demo").onclick = function(){

　　　　　　import(/*webpackChunkName: "test", webpackPrefetch:true*/"./test")　　　//预加载开启

　　　　　　.then()

　　　　　　.catch()

　　　　}

　　上面例子中：若无webpackPrefetch:true,文件test只能在onclick时被加载，属于懒加载

　　　　　　　　若有webpackPrefetch:true,则为预加载

 

4、PWA(渐进式网络应用程序)（pregressive web application）

　　　作用：离线可访问，一种可以提供类似于native app（原生应用程序）体验的 web app(网络应用程序)

　　　依赖插件：workbox-webpack-plugin

　　　　EXP：

　　　　　　webpack.config.js

　　　　const WorkboxWebpackPlugin = require("workbox-webpack-plugin");

　　　　module.exports = {

　　　　　　... ,

　　　　　　plugins:[

　　　　　　　　... ,

　　　　　　　　new WorkboxWebpackPlugin.generateSW({

　　　　　　　　　　clientsClaim:true,　　//帮助service worker快速启动

　　　　　　　　　　skipWaiting:true,　　//删除旧的serviceWorker

　　　　　　　　})

　　　　　　]

　　　　}

　　　　打包入口js：

　　　　if("serviceWorker" in navigator){

　　　　　　window.addeventLister("load",()=>{

　　　　　　　　navigator.serviceWorker.register("./service-worker.js")

　　　　　　　　.then()

　　　　　　　　.catch()

　　　　　　})

　　　　}　　//入口文件注册serviceWorker

　　

　　　　package.json

　　　　"eslintConfig":{

　　　　　　"extends":"airbnb-base",

　　　　　　"env":{

　　　　　　　　"browswe":true　　//处理兼容问题

　　　　　　}

　　　　}

　　注意：

　　1、eslint不认识window、navigator这些全局变量

　　　　解决方法：修改package.json中eslintConfig配置

　　　　　　　　"env":{"browser":true}　　　　//支持浏览器端全局变量

　　2、sw代码必须运行在服务器上

 

　5、多线程　

　　依赖：thread-loader

　　module:{

　　　　rules:[

　　　　　　{

　　　　　　　test:/\.js$/,

　　　　　　　exclude:/node_nodule/,

　　　　　　　use:[

　　　　　　　　　{

　　　　　　　　　　　loader:"thread-loader",　　　　//使用多线程

　　　　　　　　　　　options:{

　　　　　　　　　　　　　workers:2　　　　//进程2个

　　　　　　　　　　　}

　　　　　　　　　}，

　　　　　　　　　{

　　　　　　　　　　loader:"babel-loader",

　　　　　　　　　　options:{ ... }

　　　　　　　　　}

　　　　　　　　]

　　　　　　}

　　　　]

　　}

　　注意：进程启动大概为600ms。进程通信也有时间开销，只有工作消耗时间比较长，开启多线程才有帮助