webpack优化前端性能

一、webpack来优化前端性能
首先，用webpack优化前端性能是指优化webpack的输出结果，让打包的最终结果在浏览器运行快速高效。

• 压缩代码：
  删除多余的代码、注释、简化代码的写法等等方式。可以利用webpack的UglifyJsPlugin和ParallelUhlifyPlugin来压缩JS文件，利用cssnano（css-loader？minimize）来压缩css

• 利用CDN加速：
  在构建过程中，将引用的静态资源路径修改为CDN上对应的路径。可以利用
  webpack对于output参数和各种loader的publicPath参数来修改资源路径

• Tree Shaking
  消除最终文件中未使用的代码。可以通过在启动webpack时追加参数–optimize-minimize来实现

• Code Splitting
  将代码按路由维度或者组件分块（chunk），这样做到按需加载，同时可以充分利用浏览器缓存

• 提供公共第三方库
  SplitChunksPlugin插件来进行公共模块抽取，利用浏览器缓存可以长期缓存这些无需频繁变动的公共代码

webpack treeShaking机制的原理

• treeShaking也叫摇树优化，是一种通过移除多余代码，来优化打包体积的，生产环境默认开启。
• 可以在代码不运行的状态下，分析出不需要的代码；
• 利用es6模块的规范
  ES6 Module引入进行静态分析，故而编译的时候正确判断到底加载了那些模块
  静态分析程序流，判断哪些模块和变量未被使用或者引用，进而删除对应的代码

二、webpack如何实现持久化缓存

• 服务端设置http缓存头（cache-control）
• 打包依赖和运行时到不同的chunk，即作为splitChunk，因为他们几乎是不变的
• 延迟加载：使用import()方式，可以动态加载的文件分到独立的chunk，以得到自己的chunkhash
• 保持hash值的稳定：编译过程和文件内通的更改尽量不影响其他文件hash的计算，对于低版本的webpack生成的增量数字id不稳定问题，可用hashedModuledldsPlugin基于文件路径生成解决