【webpack5修行之道】第11篇：性能优化-treeshaking

jay_mw

于 2021-06-18 09:43:54 发布

阅读量390

点赞数

分类专栏： webpack 文章标签： node.js webpack 前端

本文链接：https://blog.youkuaiyun.com/j178202798/article/details/117303701

版权

本文介绍了webpack5的性能优化策略之一——treeshaking，通过比喻解释了treeshaking的概念，即移除无用代码的过程。要实现treeshaking，需要使用esmodule语法并设置mode为production。详细讨论了webpack.config.js配置、index.js和math.js的修改，以及如何通过添加"sideEffects": false来告知webpack代码可进行treeshaking。此外，还提到了sideEffects配置可能导致忽视css和某些库，最后给出了避免treeshaking特定文件的建议。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇：【webpack5修行之道】第10篇：性能优化-缓存

那么什么是treeshaking呢？

treeshaking就是树摇优化，就好比我们有用的代码是绿色的树叶，无用的代码（vscode提示是灰色的）是黄色的树叶，我们在打包的时候抱住树干使劲的摇，将黄色的树叶摇落下来，这个过程称为treeshaking

怎么才能实现treeshaking呢？

有两个前提：

1. 使用esmodule语法

2.开启mode = production

webpack.config.js配置如下：

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const { resolve } = require('path')

module.exports = {
  mode: 'production',
  entry: './src/index.js',
  output: {
    path: resolve(__dirname, 'build'),
    filename: 'js/[name].[chunkhash:10].js'
  },
  module: {