【webpack】自带的优化

tree-shaking

删除没有用的代码，只对ES模块起作用。

webpack会在生产环境中删除掉没使用的代码

 

 

export const a = () => {
    console.log(1)
}

console.log(a()) // 副作用，模块内部被调用

import {a} from './b.js'

export const aa = () -> {
    retrun 'aa'
}

　　

模块导入了但没有使用，我们需要不要被打包

在package.json加下面代码

{"sideEffects": false
}

 

那么问题来了

import './style.css'

 

csss文件也被干掉了

 

我们不希望删掉呀

 

通过这样

require('./style.css')

绕道而行

 

第二种方式就是通过配置设置一下

{
  "sideEffects": [
        "*.css"
   ]
}

 

官方介绍

 

scope-hoisting

代码简化处理

let a = 1;
let b = 2;
let c = a+b;
console.log(c)

打包之后成这样

console.log(3)

 

变量压缩

通常称为作用域提升