前端小白操作指导:如何使用Webpack压缩与转译JavaScript代码?

本文主要是介绍前端小白操作指导:如何使用Webpack压缩与转译JavaScript代码?,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

问题背景

在Web开发中,代码的性能和加载时间是用户体验的重要组成部分。为此,将JavaScript代码压缩和优化是发布前一个必不可少的步骤。说人话就是最近在做谷歌插件开发,使用的是JavaScript和HTML。插件还没发布,只能通过压缩包分享给别人体验,主要是我不希望客户轻易看到源代码,于是就想到代码压缩,此外,由于使用了ES6语法,可能会遇到浏览器兼容问题,所以还需要进行一次代码转译。

解决方案

压缩JavaScript文件,可以移除多余的空格、注释、和缩短变量名,有助于减少加载时间,还可以保护源代码不被轻易查看。

常用的JavaScript压缩工具

以下是一些广泛使用的JavaScript压缩工具:

UglifyJS

UglifyJS是一个流行的JavaScript压缩工具。它减少代码中的变量名和函数名长度,自动去除未使用的代码,优化输出文件大小,减小文件体积

npm install uglify-js -g
uglifyjs input.js -o output.min.js

Terser

作为UglifyJS的替代品,Terser拥有更快的压缩速度和更好的ES6支持。可以通过npm安装并作为构建脚本的一部分运行。

npm install terser -g
terser input.js -o output.min.js

Webpack

Webpack是一个功能强大的模块打包器,内置了代码压缩功能。通过配置TerserPlugin,可以轻易地实现生产环境下的代码压缩。

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');module.exports = {mode: 'production',optimization: {minimize: true,minimizer: [new TerserPlugin()],},
};

Rollup

Rollup是一个现代的JavaScript模块打包器,也支持使用 Terser 插件进行代码压缩。可以通过配置rollup-plugin-terser插件来实现压缩。

// rollup.config.js
import { terser } from 'rollup-plugin-terser';export default {input: 'src/main.js',output: {file: 'bundle.min.js',format: 'cjs'},plugins: [terser()]
};

Babel

Babel不仅用于转译ES6+代码到ES5,还可以配合babel-minify插件来压缩代码。

npm install @babel/cli @babel/core @babel/preset-env babel-plugin-minify -D
babel src --out-dir dist
// .babelrc
{"presets": ["@babel/preset-env"],"plugins": ["babel-plugin-minify"]
}

Closure Compiler

Google的Closure Compiler是一个强大的JavaScript优化工具,它不仅可以压缩代码,还可以进行代码优化。

java -jar closure-compiler.jar --js input.js --js_output_file output.min.js

如何自动处理文件依赖并压缩文件

现在开发的情况是:我在background.js 文件引用了 utils.js 文件,并且在两个文件中都使用了 ES6 语法。这里不仅要对 background.js 文件进行压缩,还要将 ES6 代码转译成 ES5。

因为之前做过一些前端开发,所以这里选择用过 Webpack 和 Babel,将 Babel 设置为转译工具,并将 Webpack 设置为压缩工具。

1、安装必要的包

npm install --save-dev webpack webpack-cli
npm install --save-dev @babel/core @babel/preset-env babel-loader
npm install --save-dev terser-webpack-plugin

2、配置Webpack

创建一个webpack.config.js文件,并配置对应的入口文件、输出文件和babel-loader

// webpack.config.js 示例配置
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')module.exports = {// 入口点,可以是单个文件或文件数组entry: {background: './src/background.js', // 背景脚本的路径content: './src/content.js',      // 内容脚本的路径},// 输出配置output: {filename: '[name].min.js', // 输出文件的命名规则,[name]会被替换为入口对象的keypath: path.resolve(__dirname, 'dist') // 输出文件的目录},// 模块的加载规则module: {rules: [{test: /\.js$/, // 匹配所有.js文件exclude: /node_modules/, // 排除node_modules目录下的文件use: {loader: 'babel-loader', // 使用babel-loaderoptions: {presets: ['@babel/preset-env'] // 使用的Babel预设}}}// 可以根据需要添加更多的规则,比如处理CSS或图片等]},// 优化配置optimization: {minimize: true, // 开启压缩minimizer: [new TerserPlugin({// TerserPlugin的配置项,可以根据需要进行调整parallel: true, // 多线程进行压缩terserOptions: {compress: {drop_console: true // 去除console语句}// 可以根据需要添加更多的Terser配置项}})]},// 模式:development | production | nonemode: 'production' // 设置为production模式// 其他配置项,如devtool、plugins等// devtool: 'source-map', // 开启源代码映射,方便调试// plugins: [//   // 可以添加自定义的插件// ],
}

3、运行Webpack

在终端中运行以下命令来进行构建。

npx webpack --config webpack.config.js

不知道大家有没有更好的操作方法?

这篇关于前端小白操作指导:如何使用Webpack压缩与转译JavaScript代码?的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1076715

相关文章

使用Python实现矢量路径的压缩、解压与可视化

《使用Python实现矢量路径的压缩、解压与可视化》在图形设计和Web开发中,矢量路径数据的高效存储与传输至关重要,本文将通过一个Python示例,展示如何将复杂的矢量路径命令序列压缩为JSON格式,... 目录引言核心功能概述1. 路径命令解析2. 路径数据压缩3. 路径数据解压4. 可视化代码实现详解1

Pandas透视表(Pivot Table)的具体使用

《Pandas透视表(PivotTable)的具体使用》透视表用于在数据分析和处理过程中进行数据重塑和汇总,本文就来介绍一下Pandas透视表(PivotTable)的具体使用,感兴趣的可以了解一下... 目录前言什么是透视表?使用步骤1. 引入必要的库2. 读取数据3. 创建透视表4. 查看透视表总结前言

Python 交互式可视化的利器Bokeh的使用

《Python交互式可视化的利器Bokeh的使用》Bokeh是一个专注于Web端交互式数据可视化的Python库,本文主要介绍了Python交互式可视化的利器Bokeh的使用,具有一定的参考价值,感... 目录1. Bokeh 简介1.1 为什么选择 Bokeh1.2 安装与环境配置2. Bokeh 基础2

SpringBoot UserAgentUtils获取用户浏览器的用法

《SpringBootUserAgentUtils获取用户浏览器的用法》UserAgentUtils是于处理用户代理(User-Agent)字符串的工具类,一般用于解析和处理浏览器、操作系统以及设备... 目录介绍效果图依赖封装客户端工具封装IP工具实体类获取设备信息入库介绍UserAgentUtils

Android使用ImageView.ScaleType实现图片的缩放与裁剪功能

《Android使用ImageView.ScaleType实现图片的缩放与裁剪功能》ImageView是最常用的控件之一,它用于展示各种类型的图片,为了能够根据需求调整图片的显示效果,Android提... 目录什么是 ImageView.ScaleType?FIT_XYFIT_STARTFIT_CENTE

Spring 中的循环引用问题解决方法

《Spring中的循环引用问题解决方法》:本文主要介绍Spring中的循环引用问题解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录什么是循环引用?循环依赖三级缓存解决循环依赖二级缓存三级缓存本章来聊聊Spring 中的循环引用问题该如何解决。这里聊

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Pandas使用AdaBoost进行分类的实现

《Pandas使用AdaBoost进行分类的实现》Pandas和AdaBoost分类算法,可以高效地进行数据预处理和分类任务,本文主要介绍了Pandas使用AdaBoost进行分类的实现,具有一定的参... 目录什么是 AdaBoost?使用 AdaBoost 的步骤安装必要的库步骤一:数据准备步骤二:模型

Spring Boot中JSON数值溢出问题从报错到优雅解决办法

《SpringBoot中JSON数值溢出问题从报错到优雅解决办法》:本文主要介绍SpringBoot中JSON数值溢出问题从报错到优雅的解决办法,通过修改字段类型为Long、添加全局异常处理和... 目录一、问题背景:为什么我的接口突然报错了?二、为什么会发生这个错误?1. Java 数据类型的“容量”限制

使用Pandas进行均值填充的实现

《使用Pandas进行均值填充的实现》缺失数据(NaN值)是一个常见的问题,我们可以通过多种方法来处理缺失数据,其中一种常用的方法是均值填充,本文主要介绍了使用Pandas进行均值填充的实现,感兴趣的... 目录什么是均值填充?为什么选择均值填充?均值填充的步骤实际代码示例总结在数据分析和处理过程中,缺失数