你可能不需要使用派生state 文中列举了两种反模式的使用方式 直接复制prop到state 在props变化后修改state 这两种使用方式除了增加代码的维护成本外，没有任何的好处

代码分割 splitChunck 动态引用 适用场景：抽离相同代码到一个共享块 脚本懒加载，使得初始下载代码更小 懒加载JS脚本方式 CommonJS: require.ensure ES6: 动态import（需要babel支持，@babel/...

webpack打包现象webpack构建后的代码存在大量的闭包代码 大量函数闭包包裹代码，导致体积增大(模块越多越明显) 运行代码时创建的函数作用域变多，内存开销变大 被webpack转换后的模块会带上一层包裹，import会被转换成webpack...

tree-shaking 静态分析，不是动态分析 代码不会被执行到，就不会打包到bound.js 必须使用ES6的语法(import、export)才支持tree-shaking，commonjs方式不支持 webpck默认支持，在.babelrc里...

ESlintESLint是一个用来识别ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。 12345678910111213141516171819202122232425262728293031323...

定位源代码 通过 source-map 定位到源代码 开发环境：建议使用 首先在源代码的列信息是没有意义的，只要有行信息就能完整的建立打包前后代码之间的依赖关系。因此不管是开发环境还是生产环境，我们都会选择增加cheap基本类型来忽略模块打包前后...

基础库分离将react、react-dom基础包通过cdn引入，不打入到bundle中 externals 配置12345678module.exports = { externals: { react: ...

多页面应用MPA 每一次页面跳转，后台都会返回一个新的html，多页应用 属于后端渲染，有明显的优势：SEO友好、每个页面是解耦的 缺点：每个页面对应一个entry，一个html-webpack-plugin，（这种太麻烦了，每次新增都需要再配置一次...

资源内联是干什么资源内联：就是把打包好的css等文件，在html中注入这些文件路径，实现内联 页面框架的初始化，比如flexible 上报相关打点 css内联避免页面闪动（直接将css内联到html文件） 内联html123// raw-load...

webpack热更新plugins配置 webpack-dev-server 开启本地服务器，监听文件变化后，热更新页面;不刷新浏览器而是热更新，不输出文件，而是放在内存中;配合 new.webpack.HotModuleReplacementP...