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