博客

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