web前端开发工程师面试题vue，本以为精通Vue，没想到被前阿里大佬虐哭了，888道前端高级面试题

tree shaking

消除无用的js代码（剔除模块中没有导出或引用的部分）。仅支持ES Module静态引入方式，不支持require运行时动态引入方式。

ES6模块引入是静态分析的，故而可在编译时正确判断加载哪些代码。

可剔除的内容有限。webpack配合uglifyJS打包文件，只能shaking部分代码，像模块代码存在副作用，立即执行函数等都不能shaking。uglifyJS不进行程序流分析，只简单判断变量后续是否被引用、修改，不去排除有可能有副作用的代码。（rollup会）还有，比如项目中router.js引用了页面组件，但是在路由渲染中没有用到，也无法shaking掉。

webpack-deep-scope-analysis-plugin：利用webpack解析出来模块的AST，利用scoped分析工具解析引用关系，排除掉没有用到的模块。

1. babel.config.js 配置，分析文件模块依赖关系，生成AST时，保持ES6不动。

{

“presets”: [ [“env”, { “modules”: false }] ]

}

2. 方式1，import {Button} from ‘antd’;

方式2，import {Buttion} from ‘antd/lib/button’;

import ‘antd/lib/style’;

这两种方式，tree-shaking效果差别很大。（副作用范围不同）

babel-plugin-import-fix 插件，遍历AST找出类似import {Button} from 'antd’的结构，进行转换重新生成代码。

3. CSS tree-shaking https://juejin.im/post/6844903808397475847

方式1：mini-css-extract-plugin + purifycss-webpack

方式2：webpack-css-treeshaking-plugin。

利用postCSS提供的解析器，将CSS解析成AST，遍历获取选择器与js、html代码匹配，删除匹配不到的，返回AST，重新生成代码。

问题10 懒加载路由

考点，vue-router实现原理。

level1:

1. 将需要懒加载的子模块&#x