webpack 打包优化 js 代码的方法介绍-JavaScript中文网-JavaScript教程资源分享门户

前言

在前端开发中，我们经常使用 webpack 进行打包。但是随着项目的不断增大，我们会发现打包时间越来越长，打包后的代码越来越大，这会影响我们的开发效率和网页加载速度。本文将介绍一些优化 webpack 打包 js 代码的方法，帮助我们提高打包速度和减小打包后的文件大小。

优化方法

1. 使用 Tree Shaking

Tree Shaking 是指通过静态分析，将未使用的代码从打包后的文件中删除，从而减小文件大小。在 webpack 中，我们可以使用 UglifyJSPlugin 插件来进行 Tree Shaking。

const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  // ...
  optimization: {
    minimizer: [
      new UglifyJSPlugin({
        sourceMap: true,
        uglifyOptions: {
          compress: {
            unused: true
          }
        }
      })
    ]
  }
};

2. 使用 Scope Hoisting

Scope Hoisting 是指将模块之间的依赖关系进行静态分析，尽可能地把模块中的代码合并到一个函数中，从而减小函数声明语句的数量，使代码体积更小、运行更快。在 webpack 3 中，我们可以通过设置 moduleConcatenation 来开启 Scope Hoisting。

module.exports = {
  // ...
  plugins: [
    new webpack.optimize.ModuleConcatenationPlugin()
  ]
};

3. 使用 DllPlugin 和 DllReferencePlugin

DllPlugin 和 DllReferencePlugin 是指将一些不经常变化的库文件提前打包成一个单独的文件，从而减小每次打包的时间。我们可以通过以下步骤来实现：

在 webpack.config.js 中配置 DllPlugin 插件：

const webpack = require('webpack');
const path = require('path');

module.exports = {
  // ...
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.join(__dirname, 'dll', '[name].json')
    })
  ]
};

在一个新的 webpack.config.dll.js 中配置需要提前打包的库文件：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: {
    vendor: ['react', 'react-dom']
  },
  output: {
    path: path.join(__dirname, 'dll'),
    filename: '[name].dll.js',
    library: '[name]'
  },
  plugins: [
    new webpack.DllPlugin({
      name: '[name]',
      path: path.join(__dirname, 'dll', '[name].json')
    })
  ]
};

在 webpack.config.js 中使用 DllReferencePlugin 引用提前打包的库文件：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  // ...
  plugins: [
    new webpack.DllReferencePlugin({
      context: __dirname,
      manifest: path.join(__dirname, 'dll', 'vendor.json')
    })
  ]
};

4. 使用 HappyPack

HappyPack 是一个多线程打包工具，它可以将一些耗时的任务分解到多个子进程中去执行，从而加快打包速度。我们可以按照以下步骤来使用 HappyPack：

安装 HappyPack：
```
npm install happypack --save-dev
```

在 webpack.config.js 中配置 HappyPack：

const HappyPack = require('happypack');
const os = require('os');
const happyThreadPool = HappyPack.ThreadPool({ size: os.cpus().length });

module.exports = {
  // ...
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ['happypack/loader?id=js']
      }
    ]
  },
  plugins: [
    new HappyPack({
      id: 'js',
      threadPool: happyThreadPool,
      loaders: ['babel-loader']
    })
  ]
};

5. 使用 Code Splitting

Code Splitting 是指将代码分割成多个小块，从而减小每个小块的大小，提高加载速度。在 webpack 中，我们可以使用以下两种方式来实现 Code Splitting：

动态导入：

import(/* webpackChunkName: "lodash" */ 'lodash').then(_ => {
  console.log(_.join(['Hello', 'webpack'], ' '));
});

配置 optimization.splitChunks：

module.exports = {
  // ...
  optimization: {
    splitChunks: {
      chunks: 'all'
    }
  }
};

总结

通过使用上述优化方法，我们可以显著提高 webpack 打包 js 代码的速度和减小打包后的文件大小。在实际开发中，我们可以根据项目的具体情况选择合适的优化方法来进行优化，从而提高开发效率和网页加载速度。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/658ca23eeb4cecbf2d252827