webpack优化目的

webpack优化目的
[1. 提升开发体验](#1. 提升开发体验)
- - [提升开发体验使用 SourceMap](#提升开发体验使用 SourceMap)
[2. 提升打包构建速度](#2. 提升打包构建速度)
- - 提升打包构建速度（开发模式）
  - [提升打包速度 oneOf](#提升打包速度 oneOf)
  - [提升打包速度 include（包含）/exclude（排除）](#提升打包速度 include（包含）/exclude（排除）)
  - [提升第二次打包速度 Cache （缓存）](#提升第二次打包速度 Cache （缓存）)
  - [提升打包速度 Thead](#提升打包速度 Thead)
[3. 减少代码体积](#3. 减少代码体积)
- - [减少代码体积（Tree Shaking）](#减少代码体积（Tree Shaking）)
  - 减少代码体积（Babel）
  - [减少代码体积（Image minimizer）](#减少代码体积（Image minimizer）)
  - [优化代码的运行性能（code split）](#优化代码的运行性能（code split）)
4.优化代码的运行性能
- - [优化代码的运行性能（preload / prefetch)](#优化代码的运行性能（preload / prefetch))
  - [优化代码的运行性能（network cache)](#优化代码的运行性能（network cache))
  - [优化代码的运行性能（core.js)](#优化代码的运行性能（core.js))
  - [优化代码的运行性能（PWA)](#优化代码的运行性能（PWA))

webpack优化目的

提升开发体验
提升打包构建速度
减少代码体积
优化代码运行性能

1. 提升开发体验

提升开发体验使用 SourceMap

问题：正常情况下，开发环境不输出dist 文件直接保存在内存中，浏览器控制台source中可以看到，

但是报错提示行数不正确，它会以打包后的行数进行提示
解释：sourceMap 可以生成源代码与打包代码一一映射的关系，方便找到出错源行数
使用方案：有两种模式，cheap-module-source-map | source-map

source-map 行列都提示，运行慢 c-m-s-m 提示行出错

这里有歧义：视频讲解生产用s-m 开发用 c-m-s-m

实际可能用生产：禁用开发：用c-m-s-m
正常使用：在webpack配置文件中 devtool："cheap-module-source-map" 直接添加一句即可

2. 提升打包构建速度

提升打包构建速度（开发模式）

HotModuleReplacement （HMR热模块替换） devServer 中 hot：true（W5默认值） !!!生产环境不推荐使用
注意：js文件不会热替换，如果需要可以在main.js中写上

//判断是否支持HMR功能，如果支持js也热替换

if（module.hot）{

module.hot.accept(./js/count)

}
在react 和 vue 中 vue框架内部集成了 React Hot Loader 来解决

react hot loader 下载之后添加到babel-loader的option选项中的plugins中，并在根组件使用，使用方法chatgpt

提升打包速度 oneOf

使用：webpack配置文件中创建一个对象oneOf包裹所有的loader，
原理：打包时oneOf只使用一个loader 速度更快，不用遍历所有的loader

提升打包速度 include（包含）/exclude（排除）

使用：include：path.resolve(__dirname,".../src") __dirname当前执行脚本的绝对路径
exclude:"node_modules"
注意：主要针对js 文件babel 和 eslint

提升第二次打包速度 Cache （缓存）

原理：js文件每次打包都要经过eslint检查，babel编译，可以对其缓存
使用：在babel的option选项配置中开启缓存 eslint 插件中也开启缓存

提升打包速度 Thead

原理：对于js文件的处理主要是 eslint、babel、teser（内部供生产环境压缩js文件使用）三个工具，通过使用Thead可以开启电脑多进程同时处理js文件
注意：在特别耗时的操作中使用，因为每个进程的启动大约有600ms左右开销
使用：
1. 获取cpu的核数，每个电脑不一样
  node.js核心模块直接使用
  const os = require("os")
  cpu核数
  const threads = os.cpus().length
2. 安装 npm i thread-loader -D
3. 在babel-loader 和 eslint插件中开启多进程
4. 使用TeserWebpackPlugin（无需下载）开启多进程压缩js文件

3. 减少代码体积

减少代码体积（Tree Shaking）

Tree Shaking 不需要配置webpack默认开启
作用：旨在移除未使用的代码（未引用的模块、函数、变量等），从而减少最终打包后的文件大小。

减少代码体积（Babel）

原理：babel会为编译的每个文件都插入辅助代码，使代码的体积过大
Babel对一些公共方法使用了非常小的辅助代码，比如extend. 默认情况下会被添加到每一个需要它的文件中。
你可以使用runtime将这些辅助代码作为一个独立模块,来避免重复引入。
介绍：runtime 禁用了babel自动对每个文件的runtime注入，而是引入；
并且使所有的辅助代码从这里引用
使用： npm i @babel/plugin-transform-runtime -D
插件放到babel中

减少代码体积（Image minimizer）

原理：打包时对图片进行压缩
使用： npm i image-minimizer-webpack-plugin imagemin -D
无损压缩：npm install imagemin-gifsicle imagemin-jpegtran imagemin-optipng imagemin-svgo -D
有损压缩：npm install imagemin-gifsicle imagemin-mozjpeg imagemin-pngquant imagemin-svgo -D
注意：有损、无损安装一个即可，这里在安装的时候可能会安装不上，使用cnpm单独安装imagemin-gifsicle

优化代码的运行性能（code split）

原理：打包时会将所有的js文件打包到一个文件中，code split 可以

将打包生成的文件进行分割，生成多个js文件，需要那个文件就加载那个文件
使用：见wpcodeSplitTest，webpack配置无需下载
在动态加载文件时，会单独进行打包，当需要时自动加载

4.优化代码的运行性能

优化代码的运行性能（preload / prefetch)

原理：我们在使用split之后，代码按需加载会卡顿。

preload ：告诉浏览器立即加载资源（优先级高，只加载当前页面）

prefetch ：告诉浏览器在空闲时间加载（可以加载当前页面。也可以加载其他页面）

他们都只会加载资源，并不执行

都有缓存
缺点：兼容性差，preload不兼容ie，prefetch（60%）不兼容safri 建议使用preload（92%浏览器支持）
使用： npm i -D preload-webpack-plugin

const PreloadWebpackPlugin = require("preload-webpack-plugin")

放到htmlplugin后面，

new PreloadWebpackPlugin()

优化代码的运行性能（network cache)

原理：当缓存文件发生变化，一般所有都更新，加上这个只更新修改的文件，其他缓存文件不变
使用：
runtimeChunk: {
name: (entrypoint) => runtime~${entrypoint.name}.js
}

优化代码的运行性能（core.js)

原理：我们使用babel打包时能对es6进行编译转换，但是promise、async等无法编译，放到一些浏览器就会有兼容性问题，直接报错
概念：core.js专门用来做es6以上的polyfill（补丁）

使用：

npm安装

修改main.js

import "core-js"; 会有一个问题是打包出来的文件比较大

复制代码

 所以我们可以根据需要的兼容引入 
 import "core-js/es/promise"

 更好的方法
 在babel.config.js中配置
   presets: [
    [
      "@babel/preset-env",
     {
        useBuiltIns: "usage",  // 按需引入corejs
         corejs: 3,
     },
   ],
  ],

优化代码的运行性能（PWA)

渐进式网络应用程序离线时也能继续运行功能（正常情况下不可以）

使用：插件webpack Workbox 见官网

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

const WorkboxPlugin = require('workbox-webpack-plugin');

plugins: [

new HtmlWebpackPlugin({

title: 'Output Management',

title: 'Progressive Web Application',

}),

new WorkboxPlugin.GenerateSW({

// 这些选项帮助快速启用 ServiceWorkers

// 不允许遗留任何"旧的" ServiceWorkers

clientsClaim: true,

skipWaiting: true,

}),

复制代码

在main.js 添加
 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);

});

}

webpack优化前端框架性能