“代码树摇”通常指的是“Tree Shaking”，这是现代前端开发中一种优化技术，主要用于消除JavaScript代码中的未使用部分，从而减少最终打包文件的大小，提高应用的加载速度和性能。Tree Shaking主要依靠静态分析和ES6模块系统的特性来工作。

如何启用Tree Shaking

1. 使用ES6模块语法

确保你的项目中使用的是ES6模块语法（import 和 export），因为Tree Shaking依赖于这些静态模块导入导出语句来进行静态分析。

2. 配置构建工具

不同的构建工具有不同的配置方式来启用Tree Shaking。以下是一些常见的构建工具及其配置方法：

Webpack

Webpack 4及以上版本默认支持Tree Shaking。你可以在webpack.config.js中配置如下：

module.exports = {
  mode: 'production', // 生产模式下会自动开启Tree Shaking
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  },
  optimization: {
    usedExports: true, // 开启Tree Shaking
    minimize: true, // 压缩输出
    minimizer: [new TerserPlugin()], // 使用Terser进行压缩
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
};
Vite

Vite 是一个由Vue.js作者尤雨溪开发的新一代前端构建工具，它默认支持Tree Shaking。你只需要安装Vite并配置项目即可：

npm init vite@latest my-vue-app --template vue
cd my-vue-app
npm install
npm run dev

Vite的配置文件vite.config.js非常简洁，默认情况下已经启用了Tree Shaking：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});
Rollup

Rollup 是一个轻量级的模块打包工具，也支持Tree Shaking。你可以在rollup.config.js中配置如下：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';

export default {
  input: 'src/index.js',
  output: {
    file: 'dist/bundle.js',
    format: 'iife',
    name: 'myApp'
  },
  plugins: [
    resolve(), // 解析第三方模块
    commonjs(), // 转换CommonJS模块为ES6
    terser() // 压缩输出
  ]
};

注意事项

  • 副作用：某些模块可能包含副作用（side effects），即即使没有直接调用该模块中的任何函数，也会执行一些代码。对于这样的模块，你需要在package.json中声明它们有副作用：
{
  "sideEffects": ["./src/some-side-effect-file.js"]
}
  • 动态导入：动态导入（import()）不会被Tree Shaking，因为它不是静态的。如果你希望某个模块能够被Tree Shaking，尽量使用静态导入。

总结

通过使用ES6模块语法和配置合适的构建工具，你可以轻松地在项目中启用Tree Shaking，从而优化最终打包文件的大小和性能。希望这些信息对你有所帮助！如果有更多问题，欢迎继续提问。