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,
}),
],文章来源：https://www.toymoban.com/news/detail-616839.html
在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);
});
});
}文章来源地址https://www.toymoban.com/news/detail-616839.html
到了这里，关于webpack优化前端框架性能的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
