webpack优化前端框架性能

webpack优化目的

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

1. 提升开发体验

提升开发体验使用 SourceMap

1. 问题：正常情况下，开发环境不输出dist 文件 直接保存在内存中，浏览器控制台source中可以看到，
   但是报错提示行数不正确，它会以打包后的行数进行提示

2. 解释：sourceMap 可以生成源代码与打包代码一一映射的关系，方便找到出错源行数

3. 使用方案：有两种模式，cheap-module-source-map | source-map
   source-map 行列都提示，运行慢 c-m-s-m 提示行出错
   这里有歧义：视频讲解生产用s-m 开发用 c-m-s-m
   实际可能用 生产：禁用 开发：用c-m-s-m

4. 正常使用：在webpack配置文件中 devtool：“cheap-module-source-map” 直接添加一句即可

2. 提升打包构建速度

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

1. HotModuleReplacement （HMR热模块替换） devServer 中 hot：true（W5默认值） !!!生产环境不推荐使用

2. 注意：js文件不会热替换，如果需要可以在main.js中写上
   //判断是否支持HMR功能，如果支持js也热替换
   if（module.hot）{
   module.hot.accept(./js/count)
   }

3. 在react 和 vue 中 vue框架内部集成了 React Hot Loader 来解决
   react hot loader 下载之后 添加到babel-loader的option选项中的plugins中，并在根组件使用，使用方法chatgpt

提升打包速度 oneOf

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

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

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

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

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

提升打包速度 Thead

1. 原理：对于js文件的处理主要是 eslint、babel、teser（内部供生产环境压缩js文件使用）三个工具，通过使用Thead可以开启电脑多进程同时处理js文件
2. 注意：在特别耗时的操作中使用，因为每个进程的启动大约有600ms左右开销
3. 使用：
   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）

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

减少代码体积（Babel）

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

减少代码体积（Image minimizer）

1. 原理：打包时对图片进行压缩
2. 使用： 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
3. 注意：有损、无损安装一个即可，这里在安装的时候可能会安装不上，使用cnpm单独安装imagemin-gifsicle

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

1. 原理：打包时会将所有的js文件打包到一个文件中，code split 可以
   将打包生成的文件进行分割，生成多个js文件，需要那个文件就加载那个文件

2. 使用：见wpcodeSplitTest，webpack配置 无需下载

3. 在动态加载文件时，会单独进行打包，当需要时自动加载

4.优化代码的运行性能

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

1. 原理： 我们在使用split之后，代码按需加载会卡顿。
   preload ：告诉浏览器立即加载资源（优先级高，只加载当前页面）
   prefetch ：告诉浏览器在空闲时间加载 （可以加载当前页面。也可以加载其他页面）
   他们都只会加载资源，并不执行
   都有缓存

2. 缺点：兼容性差，preload不兼容ie，prefetch（60%）不兼容safri 建议使用preload（92%浏览器支持）

3. 使用： npm i -D preload-webpack-plugin
   const PreloadWebpackPlugin = require(“preload-webpack-plugin”)
   放到htmlplugin后面，
   new PreloadWebpackPlugin()

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

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

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

1. 原理： 我们使用babel打包时能对es6进行编译转换，但是promise、async等无法编译，放到一些浏览器就会有兼容性问题，直接报错

2. 概念：core.js专门用来做es6以上的polyfill（补丁）

3. 使用：
   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);
});
});
}