javascript - 减少js文件的大小

Question

我站点上的 js 文件大小为 1.5 MB。我假设它可以减少。 该文件是通过使用 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 会自动缩小我的 js 吗？
3. 关于如何进一步减小文件大小的任何建议

Answer 1

does a js of 1.5 MB can cause some performance issues?

根据您的绩效目标，它肯定会产生影响。由于 javascript 执行时间长，不仅下载时间而且“交互时间”都会受到影响。如果您想实现 <1 秒的交互时间，该文件可能会让您失去大约 100-500 毫秒(在良好的设备中)。在较慢的设备中更多。

does webpack automatically minify my js as a result when i used gulp-uglify there were no impact ?

Webpack 根据您的构建目标(生产/开发)使用默认优化。您可以通过更改配置来实现不错的性能提升。请引用这里:https://webpack.js.org/configuration/

any suggestion on how to reduce further the size of the file

• 分割你的包裹。在高性能项目中，您只想下载将要使用的 js 文件。
• 尝试删除未使用或不必要的大节点模块。一些示例:您可以检查 date-fns 而不是 moment.js。您不需要整个 lodash 来实现几个功能，您可以自己实现它们或使用 lodash.set、lodash.get 等包。
• 您可以查看 google 闭包编译器以消除死代码:https://github.com/google/closure-compiler