减少js文件的大小

Question

我网站上的js文件大小为1.5 MB。我假设它可以减少。 该文件是通过使用gulp version "3.9.1"和webpack "4.8.2"

编译许多模块而生成的

我尝试使用gulp-uglify缩小js文件，但差别很小。

bellow是我的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. webpack是否会自动缩小我的js，从而在我使用gulp-uglify时没有影响？
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到this answer并进行扩展，您可以采用多种方法来减小捆绑包的大小。

---

Addy Osmani has one of the best intros out there是JS成本的简介。

改善性能的实用方法：

1. 确保在为生产而构建时设置mode: 'production'
2. 使用Webpack bundle analyzer查找对膨胀起最大作用的软件包
3. 利用dynamic imports拆分代码，以便仅加载所需的代码。使用React Lazy + Suspense或类似React Loadable
4. 确保通过导入以下模块来利用tree shaking：import { module } from 'package'
5. 研究babel plugins有助于进一步优化捆绑软件的尺寸和速度

---

不过，在开始之前，最好的做法是使用SpeedCurve或WebPageTest对竞争对手或其他类似应用程序进行基准测试来设定一些目标。