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基于文件路径生成解决