原始的JavaScript代碼在正式的服務器上,如果沒有進行壓縮,混淆,不僅加載速度比較慢,而且還存在安全和性能問題. 因此現在需要進行壓縮,混淆處理. 處理方案簡單描述一下:
1. 使用 terser 工具進行
安裝 terser工具:
# npm 安裝
npm install terser --save-dev# 或使用 yarn 安裝
yarn add terser --dev
2. terser工具詳解
基本語法：
terser [input.js] [options] --output output.min.js
例如把 input.js 壓縮并輸出到 output.min.js：
terser input.js --compress --mangle --output output.min.js
3. 使用配置文件配置 Terser
Terser 支持將配置項放在單獨的配置文件中，便于管理。通常使用一個 JavaScript 文件（如：terser.config.js）進行配置. 我們可以創建一個名為 terser.config.js 的文件, 具體配置如下:
// terser.config.js
module.exports = {compress: {drop_console: true, // 去除console.*語句drop_debugger: true, // 去除debugger語句passes: 2, // 多次壓縮迭代，效果更明顯unused: true, // 刪除未使用的代碼dead_code: true, // 刪除無效的代碼分支},mangle: {toplevel: true, // 混淆頂級變量和函數名properties: false, // 默認不混淆屬性名，避免破壞外部接口},output: {comments: false, // 刪除所有注釋beautify: false, // 不進行格式化排版，壓縮為一行},sourceMap: {filename: "output.min.js",url: "output.min.js.map"}
};對于常用的配置項, 詳解如下:
compress 壓縮選項：
| 選項名 | 說明 | 推薦值 |
|---|---|---|
| drop_console | 移除所有console.*語句 | true |
| drop_debugger | 移除所有debugger語句 | true |
| passes | 重復壓縮次數，數值越高效果越好 | 2~3 |
| unused | 刪除未使用的變量或函數 | true |
| dead_code | 刪除死代碼 | true |
mangle 混淆選項：
| 選項名 | 說明 | 推薦值 |
|---|---|---|
| toplevel | 混淆頂級函數和變量名 | true |
| properties | 是否混淆對象屬性名 | false（慎用 |
| reserved | 不被混淆的變量或函數名（保留關鍵字） | 按需配置 |
output 輸出選項:
| 選項名 | 說明 | 推薦值 |
|---|---|---|
| comments | 是否保留注釋 | false |
| beautify | 是否格式化輸出代碼 | false |
sourceMap 源碼映射選項:
用于生成 source map 文件，便于調試
| 選項名 | 說明 |
|---|---|
| filename | 指定輸出js文件名 |
| url | source map 文件的名稱 |
4. 運行 Terser 配置文件
使用配置文件進行壓縮：
terser input.js --config-file terser.config.js --output output.min.js
- –config-file 指定使用的配置文件。
- –output 指定輸出文件路徑。
5. 在 npm scripts 中配置（推薦）
為了方便管理，建議你在項目的 package.json 中添加一個 npm script：
{"scripts": {"build:js": "terser src/input.js --config-file terser.config.js --output dist/output.min.js"}
}然后執行:
npm run build:js
4. 與 Webpack 集成使用（可選)
如果你使用的是 webpack 項目，推薦使用 terser-webpack-plugin：
安裝插件：
npm install terser-webpack-plugin --save-dev
webpack 配置示例：
// webpack.config.js示例
const TerserPlugin = require('terser-webpack-plugin');module.exports = {//...optimization: {minimize: true,minimizer: [new TerserPlugin({terserOptions: require('./terser.config.js'),extractComments: false, // 不生成LICENSE文件}),],},
};7. 調試與常見問題
- 如果代碼運行出錯，通常是因為mangle或compress配置過于激進，如properties:true可能會 破壞代碼。你可以逐步放寬選項排查問題。
- 建議始終開啟 sourceMap，方便快速定位問題代碼。
8. input.js 與 input.mini.js替換
我們生成了input.mini.js之后, 如何替換呢? 當然你可以手動替換,那樣可能會比較復雜,而且容出錯.我這邊直接是使用了自己寫的一個腳本
1. update_js_reference.sh
將html代碼中的 input.js替換成 input.mini.js, 代碼如下:
#!/bin/bash# 在所有HTML文件中將main.js引用更改為main-mini.js
find -name "*.html" -type f -exec sed -i '' "s|/static/js/main.js|/static/js/main-mini.js|g" {} \;echo "已將所有HTML文件中的main.js引用更改為main-mini.js"2. restore_js_reference.sh
將html代碼中的 input.mini.js復原成input.js, 用于繼續開發:
#!/bin/bash# 在所有HTML文件中將main-mini.js引用更改回main.js
find -name "*.html" -type f -exec sed -i '' "s|/static/js/main-mini.js|/static/js/main.js|g" {} \;echo "已將所有HTML文件中的main-mini.js引用更改回main.js"
)