npm start 冲进5s内，让开发变得更快乐！

2023-11-09 03:30:53

随着项目不断迭代，所需的静态资源、依赖库和插件越来越多，需要遍历的文件也呈指数式增加，导致每次编译的速度非常慢，再加上笔者接手的是类游戏化的Phaser项目，光是游戏引擎也需要消耗资源，固对项目进行编译时的优化。

优化项目配置

1. 使用缓存

在npm start时，webpack会将编译后的文件缓存起来，以便下次启动项目时可以更快地加载。我们可以通过以下方法启用缓存：

// webpack.config.js
module.exports = {
  // ...
  cache: true,
  // ...
};

2. 使用source map

source map可以帮助我们跟踪编译后的代码和原始代码之间的关系，以便在调试时更容易定位问题。但是，source map也会增加编译后的文件大小，因此我们可以根据需要启用或禁用它：

// webpack.config.js
module.exports = {
  // ...
  devtool: 'source-map', // 启用source map
  // ...
};

3. 使用tree shaking

tree shaking可以帮助我们移除项目中未使用的代码，从而减小编译后的文件大小。我们可以通过以下方法启用tree shaking：

// webpack.config.js
module.exports = {
  // ...
  optimization: {
    usedExports: true, // 启用tree shaking
    // ...
  },
  // ...
};

使用适当的工具

1. 使用webpack-bundle-analyzer

webpack-bundle-analyzer可以帮助我们分析编译后的文件大小，并找出哪些文件占用了最多的空间。我们可以通过以下命令安装和使用它：

npm install webpack-bundle-analyzer --save-dev

// webpack.config.js
const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

module.exports = {
  // ...
  plugins: [
    new BundleAnalyzerPlugin(), // 添加BundleAnalyzerPlugin插件
    // ...
  ],
  // ...
};

2. 使用happypack

happypack可以帮助我们并行编译代码，从而提高编译速度。我们可以通过以下命令安装和使用它：

npm install happypack --save-dev

// webpack.config.js
const HappyPack = require('happypack');

module.exports = {
  // ...
  plugins: [
    new HappyPack({
      loaders: [{
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }],
      threads: 4 // 并行编译的线程数
    }),
    // ...
  ],
  // ...
};