webpack打包优化之减少代码体积(Tree shaking、babel)

news/2024/10/30 23:17:38/

一、Tree shaking (摇树优化)

Webpack打包中的tree shaking指的是通过静态分析代码引用关系,在构建时仅打包项目中实际使用到的代码,从而将未使用过的代码排除在构建产物之外,减小项目体积。

在Tree shaking过程中,Webpack会自动分析项目中每个模块的引用关系,只有被引用过的模块和代码块才会被打包到输出文件中,未被引用的模块和代码块则会被删除,以减少输出文件大小。这样就可以标记和删除没有使用过的代码,从而减小打包后文件的体积,提升网站性能。

值得注意的是tree shaking的必要条件之一为ES6模块化,因为ES6模块化中的代码引用关系是明确的静态分析关系,使得Webpack能够方便地判断哪些代码需要被打包。而对于CommonJS模块和AMD模块,因引用关系不可确定,无法做到tree shaking。因此在开发时候应该遵循ES6模块化的规范。

关于使用

这个功能我们不需要额外配置什么,webpack已经自动开启了这个功能
这也是我们用webpakc构建项目的好处之一

二、babel编译优化

babel会对ES6及以上的代码进行转译成ES5的代码,而ES5的代码存在一些冗余的部分,也就是所谓的辅助代码。因此会增加代码的体积。

Babel 对一些公共方法使用了非常小的辅助代码,比如 _extend。默认情况下会被添加到每一个需要它的文件中。

在babel的配置中关闭部分不必要的转译功能来减少代码的体积。

什么是@babel/plugin-transform-runtime

@babel/plugin-transform-runtime是一个Babel插件,用于将Babel转换代码时使用的工具函数替换为较小的运行时版本以减小打包后文件的体积。 这个插件使用了babel-runtime作为运行时的源模块,而不是将其内联到每个编译后的模块中。

使用@babel/plugin-transform-runtime可以避免重复的代码并提供其他功能,如对内置对象的Polyfills支持。此外,它还可以避免污染全局命名空间,因为它将其所有依赖项都打包到一个单独的模块中。这使得它适用于任何类型的项目,包括library的构建。

使用

下载:

npm i @babel/plugin-transform-runtime -D

配置:

module.export = {module: {rules: [{test: /\.js$/,include: path.resolve(__dirname, "../src"), use: [{loader: "babel-loader",options: {plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积},},],},]}
}

http://www.ppmy.cn/news/437101.html

相关文章

美颜相机-

创建页面 窗体 按钮 字体 public void showUI(){JFrame jf new JFrame("图像处理");jf.setSize(1700,1200);jf.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);jf.setLayout(new FlowLayout());//创建按钮对象 |设置属性 文本 字体(font) 尺…

java实现美颜相机

看下实现效果 准备工作我们需要导入webcam包 ## 视频图像获取: http://webcam-capture.sarxos.pl/ ## 导包: - Eclipse : - * 项目: - 1: 右键项目名 Build Path - Config BuildPath - Lib - add Jars 选中 - IDEA : - 1:右键项目名 Module …

三.美颜相机开发

美颜相机开发 UI的使用: JFrame JButton Listener: 加入按钮实现点击什么滤镜特效就绘制什么滤镜! 代码: 首先对UI进行编写 public class ImagePad {//使用字符串储存按钮名称String[] strs {"打开", "保存", &q…

flutter美颜相机插件

flutter美颜相机插件 beauty_cam(github) beauty_cam(gitee) beauty_cam(pub.dev) beauty_cam(pub.flutter-io.cn) flutter美颜相机 目前功能: 开关美颜拍照拍视频切…

JAVA PC端美颜相机

这是我在蓝杰做的第一个项目:PC端美颜相机。这个小程序的本质就是对一张图像做处理。存储在计算机的图像信息实际上是一个个像素点,不同的像素点有不同的rgb值,修改像素点的rgb值我们就可以将图像处理成我们想要的效果。 首先我们需要创建一个图形界面作…

美颜相机-磨皮实现

主要参考了《使用OPENCV简单实现具有肤质保留功能的磨皮增白算法》这篇文章,我使用了python实现,最主要的是直接按原文公式算的话,我这里一直有个问题就是原图中纯色的地方处理后会出现色彩斑点而且非常严重,不知道原作者是否有这…

美颜相机毕设项目零基础教学

美颜相机开发手册 1.数字化图像底层原理 2.文件读取图片,操作图片矩阵 3.图像滤镜算法实现 4.项目结构设计 5.图像存储,附加功能实现(画笔/P图/贴纸…) 6.卷积图像处理算法实现 7.图像识别原理 8.二维码的生成与识别 9.以…

美颜相机的基本功能实现

美颜相机的基本功能实现 基本知识 在学习了在标准绘制图形库中进行简单的递归图像实现后,我们把目光聚焦到了对于复杂图片文件的处理上,在这里需要简单介绍一下关于图像色彩的知识,以及缓存图片类的介绍。 图形色彩参数“ARGB” 在一个复…