2017年tree-shaking性能优化实践.pdf

1、Tree Shaking 性能优化实践2017 什么是tree shaking Tree shaking原理 Tree shaking实践 总结目录什么是tree shaking1去掉用不到的多余代码支持tree shaking的构建工具Closure compilerWebpack2RollupTree Shaking 原理2 代码不会被执行，不可到达 代码执行的结果不会被用到 代码只会影响死变量（只写不读）Dead CodeDead Code Elimination依赖关系是确定的，和运行时的状态无关可以进行可靠的静态分析,然后进行消除ES6 module 特点：只能作为模块顶层的语句出现

2、 import 的模块名只能是字符串常量 import binding 是 immutable 的无用的模块消除1DCE试验.babelrcRollup自带部分DCEWebpack 不做DCE125B3KBUglify实现DCERollup/Webpack+Uglify64Brollup517Brollup2无用代码消除函数消除试验类消除试验无用函数消除成功110B612Brollupwebpack消除失败D3230KBRolluptreeshaking:false96KBRolluptreeshaking:trueWebpack3220KBThree.js512KBRolluptreesha

3、king:false492KBRolluptreeshaking:trueWebpack3474KB Javascript动态语言特性使得分析比较困难 Side Effect广泛存在 Rollup只处理函数和importexport变量Tree Shaking效果不佳Tree Shaking对顶层纯函数效果更好https:/ ADVANCED_OPTIMIZATIONS-process_common_js_modules-transform_amd_modules-language_in ECMASCRIPT6-js src/main.js-jssrc/util.js-js src/menu.

4、js-js_output_filecc.bundle.js-process_common_js_modules编译命令输出结果Closure Compiler侵入式Annotating JavaScript for the Closure CompilerTree Shaking对web意义重大但目前还处在发展阶段Tree Shaking 实践3Webpack 2升级 效果不明显Webpack 3升级 无用的代码并没有完全消除 rollup也不能根本解决问题 Closure compiler有侵入，需要改代码问题310KB减小import范围1.5MBbabel-plugin-import-f

5、ixhttps:/ 使用ES6模块规范静态分析 构建模块化的输出package.json module字段Three.jspixi.jsecharts.js 组件模块独立输出import-fix为了能被shake：webpack-css-treeshaking-pluginhttps:/ 1plugin 2plugin nCSSASTWebpack pluginCompilationPostCSSPostCSS plugincssJS遍历CSS ast，获取ID和class选择器用正则在js代码中对每一个选择器进行匹配在CSS ast上，删除匹配不到的选择器返回CSS Ast重新生成sourc

6、ecss sourcebundleVueReact Side Effect 也存在webpack-bundle-analyzer1广义Tree Shaking，bundle去重2CommonsChunkPlugin Vendor需要不停的手动维护 不能使用babel-plugin-import-fix插件问题 去除vendor entry 自动将所有的node_module和出现两次及以上的文件打包 babel-plugin-import-fix 生效问题 异步模块没有得到优