使用Webpack壓縮與轉譯JavaScript代碼的操作方法

更新時間：2024年05月28日 08:44:23 作者：洛小豆

在Web開發(fā)中,代碼的性能和加載時間是用戶體驗的重要組成部分,為此,將JavaScript代碼壓縮和優(yōu)化是發(fā)布前一個必不可少的步驟,所以本文給大家介紹了如何使用Webpack壓縮與轉譯JavaScript代碼,需要的朋友可以參考下

問題背景

在Web開發(fā)中，代碼的性能和加載時間是用戶體驗的重要組成部分。為此，將JavaScript代碼壓縮和優(yōu)化是發(fā)布前一個必不可少的步驟。說人話就是最近在做谷歌插件開發(fā)，使用的是JavaScript和HTML。插件還沒發(fā)布，只能通過壓縮包分享給別人體驗，主要是我不希望客戶輕易看到源代碼，于是就想到代碼壓縮，此外，由于使用了ES6語法，可能會遇到瀏覽器兼容問題，所以還需要進行一次代碼轉譯。

解決方案

壓縮JavaScript文件，可以移除多余的空格、注釋、和縮短變量名，有助于減少加載時間，還可以保護源代碼不被輕易查看。

常用的JavaScript壓縮工具

以下是一些廣泛使用的JavaScript壓縮工具：

UglifyJS

UglifyJS是一個流行的JavaScript壓縮工具。它減少代碼中的變量名和函數(shù)名長度，自動去除未使用的代碼，優(yōu)化輸出文件大小，減小文件體積

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，可以輕易地實現(xiàn)生產(chǎn)環(huán)境下的代碼壓縮。

// webpack.config.js
const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
  mode: 'production',
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin()],
  },
};

Rollup

Rollup是一個現(xiàn)代的JavaScript模塊打包器，也支持使用 Terser 插件進行代碼壓縮?？梢酝ㄟ^配置rollup-plugin-terser插件來實現(xiàn)壓縮。

// 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優(yōu)化工具，它不僅可以壓縮代碼，還可以進行代碼優(yōu)化。

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

如何自動處理文件依賴并壓縮文件

現(xiàn)在開發(fā)的情況是：我在background.js 文件引用了 utils.js 文件，并且在兩個文件中都使用了 ES6 語法。這里不僅要對 background.js 文件進行壓縮，還要將 ES6 代碼轉譯成 ES5。

因為之前做過一些前端開發(fā)，所以這里選擇用過 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

創(chuàng)建一個webpack.config.js文件，并配置對應的入口文件、輸出文件和babel-loader。

// webpack.config.js 示例配置
const path = require('path')
const TerserPlugin = require('terser-webpack-plugin')

module.exports = {
  // 入口點，可以是單個文件或文件數(shù)組
  entry: {
    background: './src/background.js', // 背景腳本的路徑
    content: './src/content.js',      // 內容腳本的路徑
  },
  // 輸出配置
  output: {
    filename: '[name].min.js', // 輸出文件的命名規(guī)則，[name]會被替換為入口對象的key
    path: path.resolve(__dirname, 'dist') // 輸出文件的目錄
  },
  // 模塊的加載規(guī)則
  module: {
    rules: [
      {
        test: /\.js$/, // 匹配所有.js文件
        exclude: /node_modules/, // 排除node_modules目錄下的文件
        use: {
          loader: 'babel-loader', // 使用babel-loader
          options: {
            presets: ['@babel/preset-env'] // 使用的Babel預設
          }
        }
      }
      // 可以根據(jù)需要添加更多的規(guī)則，比如處理CSS或圖片等
    ]
  },
  // 優(yōu)化配置
  optimization: {
    minimize: true, // 開啟壓縮
    minimizer: [
      new TerserPlugin({
        // TerserPlugin的配置項，可以根據(jù)需要進行調整
        parallel: true, // 多線程進行壓縮
        terserOptions: {
          compress: {
            drop_console: true // 去除console語句
          }
          // 可以根據(jù)需要添加更多的Terser配置項
        }
      })
    ]
  },
  // 模式：development | production | none
  mode: 'production' // 設置為production模式
  // 其他配置項，如devtool、plugins等
  // devtool: 'source-map', // 開啟源代碼映射，方便調試
  // plugins: [
  //   // 可以添加自定義的插件
  // ],
}