## 一 树摇 目的：去除业务程序中没有使用的代码，使得代码体积减小 使用前提： 1. 对于js代码，必须使用 es6模块化。 ``` import { A } from './index.js' export function A() { ... } ``` 由于es6模块化语法是静态的（*在导入导出的语句中的路径必须是是静态的字符串，并且不能放入其他代码中*），可以使webpack分析出哪些是需要被剔除的代码。 2. 开启production环境 ``` module.exports = { entery: '', output: {}, module: {}, plugins: [], mode: 'production', } ``` ### 二 如何配置 webpack 可以使 tree shaking生效 1. 配置 babel，保留es6模块化语句。 ``` { "presets": [ [ "env", { "modules": false // 关闭 babel 的模块化转换功能，保留原本的es6模块语法 } ] ] } ``` 2. UglifyJs 代码压缩工具 ，帮忙剔除无用的代码 通过分析 js 语法树，从而去掉无效代码，去掉console代码，缩短变量名等。 插件：ParallelUglifyPlugin ``` const ParallelUglifyPlugin = require('webpack-parallel-ugl工fy-plugin') new ParallelUglifyPlugin({ uglifyJS: { output: { beautify: false, // 紧凑输出 comments: false, // 删除注释 }, compress: { warnings: false, drop\_console: false, ... } } }) ``` #### 不同版本的tree shaking 可能遇到的问题： 1. 如果 package.json中配置的sideEffets：false ，就可能会把css或者 @bable/polyfil 干掉，因为这个是引入没有使用的，导致打包后css文件丢失。 解决：在 package.json中配置 "sideEffets"： ["*.css"]