webpack之Tree Shaking

释义

当我们使用ES Module引入模块的时候，可能只引入了一部分，并没有全部引入。
但是打包的时候会把整个引入的文件全部打包。
为了只打包我们引入的部分，使用Tree Shaking

// 我们只引入了one，但是会把file.js整个文件都打包
import { one } from 'file.js'

支持

Tree Shaking 只支持 ES Module

代码

package.json

"sideEffects": false,
"version": "1.0.0",

当引入的一些文件没有暴露内容时，Tree Shaking会忽略掉这部分内容，但是这部分代码也是需要打包的
main.js

import './assets/css/base.css'

比如一些css内容，所以需要在package.json中配置这些内容不需要Tree Shaking

"sideEffects": [ "*.css" ],

其他示例

// 实际上@babel/polly-fill并不需要import引入，所以不需要配置
"sideEffects": [ "@babel/polly-fill" ],

开发模式：development

webpack.config.js

const path = require('path');

module.exports = {
  mode: 'development',
  optimization: { // Tree Shaking
    usedExports: true
  },
  entry: './src/index.js',  // 入口文件
  output: {
    filename: 'bundle.js',  // 文件名
    path: path.resolve(__dirname, 'dist')  // 文件夹
  }
}

开发模式：production

不需要配置

网站导航

网站导航