# 一、删除未引用代码
在实际开发中, 我们无意间可能会产生很多未使用的代码, 但是你又因为业务的原因不想把它删除, 同时又不希望在打包的时候将这些无用的代码包含进去.
# 1.1 Tree shaking
像刚刚我描述的这个移除js上下文中未引用的代码就被称为**tree shaking**, 它依赖于 ES2015 模块系统中的静态结构特性，例如 import 和 export。
而在webpack4中, 也扩展了这样的能力, 让我们看看它具体是如何使用的.
# 1.2 一个小案例
让我们先来看一个案例, 以确保让你能够完全了解tree shaking.
- 在
src文件夹下新建一个math.js并导出两个方法:
export function square(x) {
return x * x;
}
export function cube(x) {
return x * x * x;
}
@前端进阶之旅: 代码已经复制到剪贴板
- 在
src/index.js中使用cube()方法:
import './style.css'
+ import { cube } from './math'
function component() {
var element = document.createElement('div');
element.innerHTML = '孔子曰：中午不睡，下午崩溃!孟子曰：孔子说的对!';
element.classList.add('color_red')
+ console.log(cube(3)) // 使用了cube
return element;
}
document.body.appendChild(component());
@前端进阶之旅: 代码已经复制到剪贴板
- 修改
webpack.config.js中的mode:
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
