Webpack 特性探讨:CDN、分包、Tree Shaking 与热更新

文章目录

    • 前言
    • 包准备
    • CDN 集成
    • 代码分包
    • Tree Shaking
      • 原理
      • 实现条件:
      • 解决 treeShaking 无效方案:
      • 示例代码:
    • 热更新(HMR)

前言

Webpack 作为现代前端开发中的核心构建工具,提供了丰富的特性来帮助开发者优化和打包应用。本文将探讨 Webpack 的 CDN 集成、代码分包、Tree Shaking 以及热更新(HMR)等关键特性。

我们将使用前一篇文章中的代码,然后我们引入一些图片、css 等资源文件已经一些常用的第三方库,如lodash

包准备

安装文件处理的 loader 和后续分析的包

yarn add webpack-bundle-analyzer  terser-webpack-plugin url-loader file-loader -D

在 webpack.config.js 添加 处理文件的 loader , file-loader

module: {rules: [//  ... 省略{test: /\.(jpg|png|jpeg|gif)$/,use: ["file-loader"],},],},

修改 list.vue

<template><div><img :src="jsJpg" /><h3>前端三大框架:</h3><ul><li v-for="item in list" :key="item">{{ item }}</li></ul></div>
</template><script>
import jsJpg from '@/static/js.jpg'
export default {name:'List',data() {return {list: ["Vue", "React", "Angular"],jsJpg};},
};
</script>

运行结果:

在这里插入图片描述

打包结果:

执行 yarn build

在这里插入图片描述

CDN 集成

CDN(内容分发网络)的使用可以显著提高资源加载速度,特别是对于静态资源。

我们可以有三种种方式来完成:

  1. output 配置中的 publicPath

这里我们如果没有 cdn,可以通过修改 hosts 文件的方式, 文件路径:C:\Windows\System32\drivers\etc,添加内容127.0.0.1 ziyu.aliyun.com, 最后我们添加启动端口


const mode =process.env.NODE_ENV === "development" ? "development" : "production";
const isDev = process.env.NODE_ENV === "development";output: {path: path.resolve(__dirname, "dist"),filename: "bundle.js",publicPath: isDev ? "/" : "http://ziyu.aliyun.com:3000/",},

添加前运行文件

在这里插入图片描述

打包运行后文件效果

在这里插入图片描述

  1. 配置externals属性将某些依赖项从打包文件中排除,并通过 CDN 链接直接引入。
externals: {vue: "Vue","vue-router": "VueRouter",
}

在 html 文件中添加

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title><%= htmlWebpackPlugin.options.title %></title><script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script><script src="https://unpkg.com/vue-router@3.0.0/dist/vue-router.js"></script></head><body><div id="app"></div></body>
</html>

添加打包分析器:

const BundleAnalyzerPlugin  = require('webpack-bundle-analyzer').BundleAnalyzerPluginplugins: [//   ...new BundleAnalyzerPlugin({analyzerMode: 'static',reportFilename: 'report.html',openAnalyzer: false,}),],

执行 yarn build, 查看report.html , 没有 vue和vue-router的代码

在这里插入图片描述

  1. 使用html-webpack-plugin插件,在生成的 HTML 文件中动态插入 CDN 资源链接。
// 1. 配置插件new HtmlWebpackPlugin({title: "vuew + webpack",template: "./src/index.html",}),
// 2. 配置html// 可以随便添加cdn

代码分包

代码分包是 Webpack 优化应用加载性能的重要手段。通过将代码分割成多个包,可以实现按需加载,减少单次加载的数据量。

代码准备:

我们新建一个utils/calc.js文件,然后补充代码:

export const sum = (a, b) => a + b;

常规使用: hello.vue 中引用

<template><button @click="calcRes">计算 : 5 +6 结果</button> {{ res }}
</template><script>
import { sum } from "../utils/calc";
export default {data() {return {res: 0,};},methods: {calcRes() {this.res = sum(5, 6);},},
};
</script>

打包结果

  1. import() 分包:
<template><button @click="calcRes">计算 : 5 +6 结果</button> {{ res }}
</template><script>
import { sum } from "../utils/calc";
export default {data() {return {res: 0,};},methods: {calcRes() {this.res = import(/* webpackChunkName: "calc" */ "../utils/calc").then(({ sum }) => {this.res = sum(5, 6);});},},
};
</script>

在这里插入图片描述

在这里插入图片描述

  1. 自动分包:Webpack 的SplitChunksPlugin插件可以自动分析模块依赖关系,将共享模块提取到单独的包中 , 供我们自定义更加细粒度的分包策略
  optimization: {splitChunks: {chunks: 'all', // all, async, and initialminChunks :10,// 当包大于1000byte,就拆分maxSize: 1000,// 拆分的每个包不能小于500byteminSize: 500,cacheGroups:{utils: {test: /utils/,filename: '[id]_utils.js'}}},},

在这里插入图片描述

  1. 多入口分包:通过entry属性手动定义多个入口点,Webpack 会为每个入口点生成一个独立的包。

Tree Shaking

Tree Shaking 是移除代码中未引用部分的过程,它利用了 ES2015 模块的静态结构特性。

原理

  1. 一是先「标记」出模块导出值中哪些没有被用过
  2. 二是使用 Terser 删掉这些没被用到的导出代码

实现条件:

  1. 使用 ES2015 模块:确保项目使用importexport语法。
  2. 配置sideEffects:在package.json中添加 "sideEffects": false字段,告诉 Webpack 哪些文件是纯模块,可以安全地进行 Tree Shaking。
  3. 在配置中开始标记optimization.usedExports = true, 将构建设置成生产模式 mode ='production'

解决 treeShaking 无效方案:

  1. @babel/preset-envbabel-preset-env 不要将 target 设置为 node
  2. 第三方包中的 "sideEffects": false

示例代码:

我们安装 loadsh-es包来测试,它比 lodash 包更好的 tree-shaking

yarn add lodash-es
yarn add terser-webpack-plugin -D
  
<button @click="log">防抖函数</button><script>import { debounce } from 'lodash-es';export default {methods: {log: debounce(()=>console.log("log...."), 500),}}
</script>

更新配置文件:

 optimization: {minimize: true,minimizer: [new TerserPlugin()],usedExports: true,},

打包结果:可以看到结果中只有loadsh-es包的 debunce函数

在这里插入图片描述

热更新(HMR)

热更新允许在开发过程中实时更新应用,而无需刷新页面。

  1. 配置webpack-dev-server:通过webpack-dev-server提供热更新服务。
  2. 使用HotModuleReplacementPlugin:在 Webpack 配置中添加此插件,实现模块的热替换。
devServer:{hot:true
}plugins: [new webpack.HotModuleReplacementPlugin()
]mounted() {if (module.hot) {module.hot.accept('./Hello.vue', () => {});}},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/435344.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

java基础(4)类和对象

目录 1.前言 2.正文 2.1类的定义与使用 2.1.1类的定义 2.1.2类的实例化 2.1.3this引用 2.1.3.1 访问当前对象的成员变量 2.1.3.2调用当前对象的成员方法 2.1.3.3构造函数中的 this 2.1.3.4归纳this 2.2封装 2.2.1封装的定义 2.2.2访问修饰符 2.3static 2.3.1sta…

初学Vue

文章目录 简介特点 初识Vue模板语法两大类插值语法指令语法 两种数据绑定方式单项绑定&#xff08;v-bind&#xff09;双向绑定&#xff08;v-model&#xff09; 数据代理事件处理基本使用事件修饰符 键盘事件计算属性 computed 简介 一套用于构建用户界面的渐进式JavaScript框…

【面试题】软件测试实习(含答案)

软件测试实习常见面试题&#xff0c;主要是功能测试相关的基础问题 目录 一、软件测试基础 1、介绍一下你最近的项目&#xff0c;以及工作职责 2、软件项目的测试流程? 3、黑盒测试与白盒测试的区别? 4、黑盒测试常见的设计方法?怎么理解等价类方法和边界值方法 1&…

服务器几核几G几M是什么意思?如何选择?

服务器几核几G几M是什么意思&#xff1f;我们建站、搭建网络平台都要用到云服务器&#xff0c;不管在腾讯云、阿里云还是别的云服务平台选购&#xff0c;都会接触到服务器配置。云服务器就是把物理服务器&#xff08;俗称“母鸡”&#xff09;&#xff0c;用虚拟机技术虚拟出多…

FreeRTOS学习笔记一——FreeRTOS介绍

RTOS学习笔记&#xff0c;主要参考正点原子教程 目录 FreeRTOS特点任务调度方式抢占式调度时间片调度 任务状态状态转换任务列表 FreeRTOS特点 实现多个任务功能划分延时函数实现任务调度高优先级抢占低优先级每个任务都有自己的栈空间 注意&#xff1a; 中断可以打断任意任务…

设计模式之享元(Flyweight)模式

前言 面向对象很好地解决了 “抽象” 的问题&#xff0c;但是不可避免的要付出一定的代价。对于通常情况来讲&#xff0c;面向对象的成本大都可以忽略不计。但是某些情况&#xff0c;面向对象所带来的成本必须谨慎处理 具体需要自己根据需求去评估 定义 “对象性能” 模式。运用…

探索基于知识图谱和 ChatGPT 结合制造服务推荐前沿

0.概述 论文地址&#xff1a;https://arxiv.org/abs/2404.06571 本研究探讨了制造系统集成商如何构建知识图谱来识别新的制造合作伙伴&#xff0c;并通过供应链多样化来降低风险。它提出了一种使用制造服务知识图谱&#xff08;MSKG&#xff09;提高 ChatGPT 响应准确性和完整…

探索顶级低代码开发平台,实现创新

文章盘点ZohoCreator、OutSystems等10款顶尖低代码开发平台&#xff0c;各平台以快速开发、集成、数据安全等为主要特点&#xff0c;适用于不同企业需求&#xff0c;助力数字化转型。 一、Zoho Creator Zoho Creator 是一个低代码开发平台&#xff0c;它简化了应用开发中的复杂…

小程序视频编辑SDK解决方案,轻量化视频制作解决方案

面对小程序、网页、HTML5等多样化平台&#xff0c;如何轻松实现视频编辑的轻量化与高效化&#xff0c;成为了众多开发者和内容创作者共同面临的挑战。正是洞察到这一市场需求&#xff0c;美摄科技推出了其领先的小程序视频编辑SDK解决方案&#xff0c;为创意插上翅膀&#xff0…

2024前端技术发展概况

当前前端技术呈现出多方面的发展态势&#xff0c;以下是详细介绍&#xff1a; 前端框架不断演进&#xff1a; React&#xff1a;作为流行的前端框架之一&#xff0c;React 依旧保持着强大的生命力。它具有高效的虚拟 DOM 机制&#xff0c;能够快速更新和渲染页面&#xff0c;极…

pdf页面尺寸裁减

1、编辑pdf 2、点击裁减页面&#xff0c;并在空白区域双击裁减 3、输入裁减数据&#xff1a;

【易上手快捷开发新框架技术】nicegui标签组件lable用法庖丁解牛深度解读和示例源代码IDE运行和调试通过截图为证

传奇开心果微博文系列 序言一、标签组件lable最基本用法示例1.在网页上显示出 Hello World 的标签示例2. 使用 style 参数改变标签样式示例 二、标签组件lable更多用法示例1. 添加按钮动态修改标签文字2. 点击按钮动态改变标签内容、颜色、大小和粗细示例代码3. 添加开关组件动…

Angular基础学习(入门 --> 入坑)

目录 一、Angular 环境搭建 二、创建Angular新项目 三、数据绑定 四、ngFor循环、ngIf、ngSwitch、[ngClass]、[ngStyle]、管道、事件、双向数据绑定--MVVM 五、DOM 操作 &#xff08;ViewChild&#xff09; 六、组件通讯 七、生命周期 八、Rxjs 异步数据流 九、Http …

关于vue2+uniapp+uview+vuex 私募基金项目小程序总结

1.关于权限不同tabbar处理 uniapp 实现不同用户展示不同的tabbar(底部导航栏)_uniapp tabbar-CSDN博客 但是里面还有两个问题 一个是role应该被本地存储并且初始化 第二个问题是假设我有3个角色 每个角色每个tabbar不一样的&#xff0c;点击tabbar时候会导致错乱 第三个问题…

Windows11安装Docker Desktop教程

目录 一.安装前置步骤 ▐ 开启虚拟化 ▐ 安装WSL2 ▐ 安装Linux环境 二.Windows上安装Docker 一.安装前置步骤 ▐ 开启虚拟化 首先确保虚拟化的开启&#xff0c;打开任务管理器后查看&#xff1a; 确保图中的虚拟化是已启用&#xff0c;没有开启的需要通过BIOS进行开启&…

基于php的在线租房管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

MySQL-联合查询

1.简介 1.1为什么要使用联合查询 在数据设计时由于范式的要求&#xff0c;数据被拆分到多个表中&#xff0c;那么要查询⼀个条数据的完整信息&#xff0c;就 要从多个表中获取数据&#xff0c;如下图所⽰&#xff1a;要获取学⽣的基本信息和班级信息就要从学⽣表和班级表中获…

全网最全软件测试面试题(含答案解析+文档)

一、软件测试基础面试题 1、阐述软件生命周期都有哪些阶段? 常见的软件生命周期模型有哪些? 软件生命周期是指一个计算机软件从功能确定设计&#xff0c;到开发成功投入使用&#xff0c;并在使用中不断地修改、增补和完善&#xff0c;直到停止该软件的使用的全过程(从酝酿到…

修改Opcenter EXFN 页面超时时间(Adjust UI Session Extend Token)

如果你想修改Opcenter EXFN中页面Session的超时时间&#xff0c;你可以按照如下步骤修改SessionAge 这个参数&#xff1a; 管理员运行CMD执行以下命令 umconf -getconfig -file C:\temp\config.json如果第2步有报错&#xff0c;则执行步骤4;如果没有报错则执行第5步如果第2步…

react-问卷星项目(2)

流程 husky 一个git hook 工具&#xff0c;即在git commit之前执行自定义的命令&#xff0c;将规范流程化&#xff0c;如执行代码风格的检查&#xff0c;避免提交非规范的代码&#xff0c;在github搜索即可。 这两条是接着执行的&#xff0c;表示创建husky&#xff0c;在文档…