Webpack 构建 React 项目，如何使用 tree shaking 减小打包体积-JavaScript中文网-JavaScript教程资源分享门户

随着前端项目的复杂度越来越高，JavaScript 的代码量也在不断增加。这就使得项目的打包体积变得越来越大，需要更长的加载时间，降低了用户的体验感受。为了解决这个问题，我们可以通过 tree shaking 技术来减小打包体积。

什么是 tree shaking？

Tree shaking 是一个用于消除 JavaScript 中未被使用代码（dead-code）的技术，其原理是基于 ES6 模块化语法中的静态结构特性，可以对代码进行静态分析，识别出无用的代码并将其从最终的生成的包中删除。相比于传统的在运行时删除无用代码的方式，在编译阶段进行删除可以大大减小打包后文件的大小。

如何启用 tree shaking？

在使用 Webpack 构建项目时，要启用 tree shaking 需要符合以下两个条件：

使用 ES6 模块化语法，即 import 和 export。
在 Webpack 的配置文件中启用压缩选项，其中包括 UglifyJSWebpackPlugin 或 TerserWebpackPlugin 等压缩工具。

其中，使用 UglifyJSWebpackPlugin 可以通过设置 uglifyOptions 中的 warnings: true 提醒我们哪些代码并没有被 tree shaking 所消除。

以下是一个示例 Webpack 配置文件：

// javascriptcn.com 代码示例
const path = require('path');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env', '@babel/preset-react']
          }
        }
      }
    ]
  },
  plugins: [
    new UglifyJSPlugin({
      uglifyOptions: {
        warnings: true
      }
    })
  ]
};

如何在 React 项目中使用 tree shaking？

在 React 项目中，我们还需要涉及到以下两个方面：

使用 react-dom 包导入 React 的组件，而不是用整个 react 包。
使用按需加载的方式（lazy load）异步加载组件。

以下是一个示例代码：

// javascriptcn.com 代码示例
import React from 'react';
import ReactDOM from 'react-dom';

// 从 react-dom 中导入所需的组件
import { BrowserRouter as Router, Route } from 'react-dom';

// 异步加载组件
const HomePage = React.lazy(() => import('./HomePage'));

ReactDOM.render(
  <React.Suspense fallback={<div>Loading...</div>}>
    <Router>
      <Route exact path="/" component={HomePage} />
    </Router>
  </React.Suspense>,
  document.getElementById('root')
);

总结

使用 tree shaking 技术可以有效的减小 React 项目打包后的体积，提高用户体验。需要注意的是，在开发过程中应该尽可能使用 ES6 模块化语法，并在 Webpack 配置中启用压缩选项。同时，在构建 React 项目时，还需要按照上述步骤使用 react-dom 包导入组件、异步加载组件等方式，才能真正实现 tree shaking 的减小效果。

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