浅谈Webpack4 Tree Shaking 终极优化指南(5)

另外，Lodash-es，react-bootstrap 以及其他库可以在 Babel transform imports 插件的帮助下实现瘦身。该插件从库的 index.js 文件读取 import 语句，并使其指向库中特定文件。这样就使 webpack 在解析模块树时更容易对库做 tree shaking。下面的例子演示了它是如何工作的。

// Babel Transform Imports // Babel config const config = { plugins: [ [ 'transform-imports', { 'lodash-es': { transform: 'lodash/${member}', preventFullImport: true }, 'react-bootstrap': { transform: 'react-bootstrap/es/${member}', // The es folder contains es2015 module versions of the files preventFullImport: true } } ] ] }; // 这些库不再支持全量导入，否则会报错 import _ from 'lodash-es'; // 具名导入依然支持 import { debounce } from 'loash-es'; // 不过这些具名导入会被babel编译成这样子 // import debounce from 'lodash-es/debounce';

总结

全文到此结束。这样的优化可以极大地缩减打包后的大小。随着前端架构开始有了新的方向（比如微前端），保持包大小最优化变得比以往更加重要。希望本文能给那些正在给应用程序做tree shaking的同学带来一些帮助。