減少js文件的大小

Question

我網站上的js文件大小為1.5 MB。 我假設它可以減少。 該文件是通過使用webpack "4.8.2" gulp version "3.9.1"和webpack "4.8.2"編譯許多模塊而生成的

我試圖使用gulp-uglify縮小js文件，但區別很小。

下面是我的webpack.config.js的代碼

const path = require('path'),
UglifyJsPlugin = require('uglifyjs-webpack-plugin'),
settings = require('./settings');

module.exports = {
  entry: {
    App: settings.themeLocation + "scripts/app.js"
  },
  output: {
    path: path.resolve(__dirname, settings.themeLocation + "scripts"),
    filename: "app-fin.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },


  mode: 'development'
}

在我的gulpfile.js文件中，我有此代碼來調用webpack

gulp.task('scripts', function(callback) {
  webpack(require('./webpack.config.js'), function(err, stats) {
    if (err) {
      console.log(err.toString());
    }

    console.log(stats.toString());
    callback();
  });
});

我的問題：

1. 1.5 MB的js會導致一些性能問題嗎？
2. 當我使用gulp-uglify沒有影響時， webpack是否webpack自動縮小我的js結果？
3. 關於如何進一步減小文件大小的任何建議

Answer 1

1.5 MB的js會導致一些性能問題嗎？

根據您的績效目標，它一定會產生影響。 由於需要較長的javascript執行時間，因此不僅會下載時間，而且還會影響您的“交互時間”。 如果您希望互動時間少於1秒，那么該文件可能會使您失去100-500毫秒（在優質設備中）。 速度較慢的設備更多。

當我使用gulp-uglify沒有影響時，webpack是否會自動縮小我的js結果？

Webpack根據您的構建目標（生產/開發）使用默認優化。 您可以通過更改配置來獲得不錯的性能提升。 請參考這里： https : //webpack.js.org/configuration/

關於如何進一步減小文件大小的任何建議

• 划分您的捆綁包。 在高性能項目中，您只想下載將要使用的js文件。
• 嘗試刪除未使用或不必要的大節點模塊。 一些示例：可以代替date.js來檢查date-fns。 您只需要幾個函數就不需要整個lodash，您可以自己實現它們，也可以使用諸如lodash.set，lodash.get等軟件包。
• 您可以看一下Google閉包編譯器來消除無效代碼： https : //github.com/google/closure-compiler

Answer 2

對此答案 +1並加以擴展，您可以采用多種方法來減少捆綁包的大小。

---

作為JS成本的簡介， Addy Osmani是其中最好的介紹之一 。

改善性能的實用方法：

1. 確保在構建生產環境時設置mode: 'production'
2. 使用Webpack捆綁軟件分析器查找對膨脹起最大作用的軟件包
3. 利用動態導入來拆分代碼，以便僅加載所需的代碼。 使用React Lazy + Suspense或類似React Loadable的東西
4. 通過導入如下模塊來確保利用樹震動 ： import { module } from 'package'
5. 研究babel插件 ，可幫助進一步優化軟件包的大小和速度

---

不過，在開始之前，最好的做法是通過使用SpeedCurve或WebPageTest之類的競爭對手或其他類似應用程序進行基准測試來設定一些目標。