当前位置:网站首页>Compress JS code with terser
Compress JS code with terser
2022-07-07 02:27:00 【An ice cream】
webapck
Compression is provided in js The way the code works , You can remove useless code 、 Replace variable name, etc , Reduce the volume of compiled files , Increase loading speed .
Different mode
stay webpack
The configuration file webpack.config.js
Through will mode
Set to development
perhaps production
, The code will be processed differently .
You can find ,production
Files compiled in mode , File and variable names have been modified 、 Blank line breaks are removed , Even if you don't configure it yourself ,webpack We will also set production
By default, some attributes are added in the mode of , Here, for example. js Code compression uses TerserPlugin
.
terser
TerserPlugin
Processing code depends on terser
This tool , terser
It can be installed directly and used independently , When using, there are many configurations that can be defined by yourself , For details, please refer to Official documents
One of them belongs to compress options
- arrows — The arrow function body in the object has only one sentence
- arguments — arguments Parameter conversion
- dead_code — Remove unreachable code (remove unreachable code)
The following belong to mangle options
- toplevel — Should the top-level scope be defaced
- keep_classnames — The class name is reserved
- keep_fnames — Keep the function name
adopt npm install terser
After installing dependency , Direct execution terser Command statement npx terser ./src/index.js -o ./terser/default.js
, There is no configuration here , So the default processing method is used , Only remove line breaks .
Customize js How the code is compiled ,npx terser ./src/index.js -o terser/index.min.js -c arguments,arrows=true -m toplevel,keep_classnames,keep_fnames
The above configuration indicates
- Function to use arguments when , Convert to formal parameter
- When the arrow function body has only one sentence , Remove return
- Vilify variables in the top-level scope , For example, the variable name message Turn into o
- Keep the class name
- Keep the function name
You can see , The compiled code removes spaces and newlines , And some other specified processing
To make it easier to read , Format the compiled code
TerserPlugin
In the project , There's a lot of js Files need to be compressed , It will be too troublesome to specify the Compilation Rules one by one , adopt TerserPlugin Unified configuration can solve this problem .
adopt npm install terser-webpack-plugin --save-dev
After installing dependency , stay webpack.config.js
The corresponding configuration is defined in the file , More configurations can be found in Official documents
const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
// Other configurations are omitted
mode: 'production',
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
terserOptions: {
compress: {
arguments: true,
dead_code: true,
},
toplevel: true,
keep_classnames: true,
keep_fnames: true,
},
}),
],
},
};
Of the compiled file js The code is compressed into one line , After formatting, you can see the corresponding processing
summary
terser
It's a tool , With compression 、 Conversion processing js Code and other functions , Through the command line, you can directly js File for compilation .
But in the project , Use it directly terser
Too complicated , So with terser-webpack-plugin
Unified compilation , When mode
by production
when , There is a default configuration , You can also define processing rules by yourself .
That's all terser and TerserPlugin Introduction to , More information about webpack
You can refer to my other blog posts , Ongoing update ~
边栏推荐
- Stm32f4 --- PWM output
- postgresql之整体查询大致过程
- Time synchronization of livox lidar hardware -- PPS method
- 阿里云易立:云原生如何破解企业降本提效难题?
- How do I dump SoapClient requests for debugging- How to dump SoapClient request for debug?
- postgresql之整體查詢大致過程
- Jacob Steinhardt, assistant professor of UC Berkeley, predicts AI benchmark performance: AI has made faster progress in fields such as mathematics than expected, but the progress of robustness benchma
- 4 -- Xintang nuc980 mount initramfs NFS file system
- Draco - glTF模型压缩利器
- Sensor: DS1302 clock chip and driver code
猜你喜欢
Stm32f4 --- general timer update interrupt
fiddler的使用
Several classes and functions that must be clarified when using Ceres to slam
argo workflows源码解析
新一代云原生消息队列(一)
Summer Challenge database Xueba notes (Part 2)~
FLIR blackfly s usb3 industrial camera: white balance setting method
Jacob Steinhardt, assistant professor of UC Berkeley, predicts AI benchmark performance: AI has made faster progress in fields such as mathematics than expected, but the progress of robustness benchma
【服务器数据恢复】raid损坏导致戴尔某型号服务器崩溃的数据恢复案例
Collection recommandée!! Quel plug - in de gestion d'état flutter est le plus fort? Regardez le classement des manons de l'île, s'il vous plaît!
随机推荐
张平安:加快云上数字创新,共建产业智慧生态
leetcode:5. 最长回文子串【dp + 抓着超时的尾巴】
Big guys gather | nextarch foundation cloud development meetup is coming!
机器人队伍学习方法,实现8.8倍的人力回报
Introduction to RC oscillator and crystal oscillator
Sensor: introduction of soil moisture sensor (xh-m214) and STM32 drive code
[C # notes] use file stream to copy files
阿里云易立:云原生如何破解企业降本提效难题?
Stm32f4 --- general timer update interrupt
Integerset of PostgreSQL
红外相机:巨哥红外MAG32产品介绍
纽约大学 CITIES 研究中心招聘理学硕士和博士后
一片葉子兩三萬?植物消費爆火背後的“陽謀”
投资的再思考
Gee upgrade can realize one piece of run tasks
UC伯克利助理教授Jacob Steinhardt预测AI基准性能:AI在数学等领域的进展比预想要快,但鲁棒性基准性能进展较慢
传感器:土壤湿度传感器(XH-M214)介绍及stm32驱动代码
Draco - glTF模型压缩利器
This week's hot open source project!
Twenty or thirty thousand a leaf? "Yang Mou" behind the explosion of plant consumption