webpack处理打包原理webpack打包原理执行运行命令【1.entry->ast编译（查询所有import）->识别import的相关引用，形成依赖树->通过loader转义代码，这一步可以忽略->ast转义成代码->2.执行构建命令【递归返回所有依赖->返回依赖树依赖】3.执行generate命令【将依赖树回填到bundle.js中打包好的代码】]es模块和commonjs的区别es模块和commonjscjs的区别是输出值的副本，esm是cjs运行或加载时输出值的引用（export.module返回实际代码，顺序执行，阻塞执行），esm是编译时输出接口（export返回key挂载在webpack_require.d上），cjs是同步的，esm是异步的。（因为返回的不一样）loader和pluginloader：就是决定如何处理这个文件，比如从A变成B。通常返回的是一段代表如何处理文件的逻辑。这个逻辑代码也会在最后填充到包文件中。plugin：是对webpack能力的补充。依赖webpack提供的api进行操作，执行后返回结果。resolve句柄解析，常用：extension解析文件的后缀，默认为js，jsonmodules解析的包路径，默认为node_modules。alias省略了部分解析路径的写法。优化内置优化，例如压缩和块打包。其他resolveLoader处理加载器解析resolveLoader:{alias:{'a-loader':path.resolve(__dirname,'loaders/a.js')}},module:{rules:[{test:/\.js$/,use:'a-loader',exclude:/node_modules/}]},//等价于module:{rules:[{test:/\.js$/,use:path.resolve(__dirname,'loaders/a.js'),exclude:/node_modules/}]},项目首屏加载优化组件的延迟加载React.lazy()nginxgzipcdn图片压缩，图片延迟加载：intersectionObservers代码优化：render中的变量声明，全局variablereference后期使用可以减少层级结构减少domwebpackt代码划分，codesplite按需加载模块引用方式优化，比如lodash按需引用，echart按需引用。可以通过webpack-anylsis查看。通过webpackalias处理一些依赖依赖代码压缩SSR（待考察）启用缓存前端有那些优化方案全局变量局部引用的代码优化，提高gc性能foreachloop>for>for...in避免使用闭包，（返回父函数变量，也称为内存泄漏）减少dom的增删改查，减少回流和重绘，可以使用分片减少访问clientHeight等清空浏览器渲染优化队列脚手架优化代码压缩图片压缩利用包管理工具，优化包引用包处理，如lodash/moment代码分离wepack三抖，删除冗余代码webpack优化器sideEffect删除未引用包React优化使用函数组件替换class组件减少render函数中匿名函数的使用,改用类方法(Reducegc)优化gzip在服务器端压缩并启用协商缓存cdnSSR
