JavaScript 包优化完整指南：代码分割和 Tree Shaking

现代 Web 应用程序经常会遇到 JavaScript 和 CSS 包过大的问题，因为这些包会减慢初始页面加载速度。在本综合指南中，我们将探讨三种用于优化包的强大技术：代码拆分、Tree Shaking 和 CSS Purging。

了解捆绑包优化

在深入研究具体技术之前，让我们先了解一下构建 Web 应用程序时会发生什么。通常，在构建过程中，所有 JavaScript 和 CSS 文件都会合并到两个大文件（包）中。虽然这减少了 HTTP 请求，但可能会导致用户下载不必要的代码。

代码分割：按需加载 JavaScript

代码分割会将 JavaScript 包拆分成更小的块，仅在需要时加载它们。可以将其想象为将一本大书拆分成几个章节，您可以一次阅读一章。

为什么代码分割很重要

没有代码分割：

// Without Code Splitting
import { heavyFeature } from './heavyFeature';
import { rarelyUsedComponent } from './rarelyUsed';

function App() {
  return (
    

      
       // Loaded even if not immediately needed
    
  );
}

使用代码分割：

// With Code Splitting
const HeavyFeature = React.lazy(() => import('./heavyFeature'));

function App() {
  return (
    

      
      }>
         // Loads only when needed
      
    
  );
}

实施方法

// Using React Router with code splitting
const Home = React.lazy(() => import('./routes/Home'));
const Dashboard = React.lazy(() => import('./routes/Dashboard'));

function App() {
  return (
    
      }>
        
          
          
        
      
    
  );
}

// Using loadable-components
import loadable from '@loadable/component';

const HeavyChart = loadable(() => import('./HeavyChart'), {
  fallback: 
});

Tree Shaking：删除无用代码

Tree Shaking 会从 JavaScript 和 CSS 包中删除未使用的代码。这就像在打印一本书之前删除其中未读的章节一样。

JavaScript 摇树

// library.js
export const used = () => console.log('This is used');
export const unused = () => console.log('This is never used');

// main.js
import { used } from './library';
used(); // Only this function will be included in the final bundle

启用有效的 Tree Shaking

// Good - Can be tree-shaken
export const util = () => {};

// Bad - Cannot be tree-shaken
module.exports = {
  util: () => {}
};

// Bad - Has side effects, harder to tree-shake
import './styles.css';
console.log('Side effect!');

// Good - Explicit imports, easier to tree-shake
import styles from './styles.css';

使用 PurgeCSS 进行 CSS Tree Shaking

PurgeCSS 通过分析您的内容和 CSS 文件来删除未使用的 CSS。这在使用 Tailwind CSS 等 CSS 框架时特别有用。

设置PurgeCSS

// postcss.config.js
module.exports = {
  plugins: [
    require('@fullhuman/postcss-purgecss')({
      content: [
        './src/**/*.jsx',
        './src/**/*.js',
        './public/index.html'
      ]
    })
  ]
}

// tailwind.config.js
module.exports = {
  purge: [
    './src/**/*.{js,jsx,ts,tsx}',
    './public/index.html'
  ],
  // ... other config
}

实际实施技巧

1. 使用 React.Suspense 进行加载状态

function MyApp() {
  return (
    
          
          
Loading...