使用webpack打包躲不开的就是webpack优化这个话题，无论是面试还是实际开发，优化都是非常重要的事情，毕竟提升用户体验是我们前端工程师的职责。,首先就是构建时间的优化了,多进程打包，可以大大提高构建的速度，使用方法是将thread-loader放在比较费时间的loader之前，比如babel-loader,缓存资源，提高二次构建的速度，使用方法是将cache-loader放在比较费时间的loader之前，比如babel-loader,比如你修改了项目中某一个文件，会导致整个项目刷新，这非常耗时间。如果只刷新修改的这个模块，其他保持原状，那将大大提高修改代码的重新构建时间,合理设置这两个属性，可以大大提高构建速度,区分环境去构建是非常重要的，我们要明确知道，开发环境时我们需要哪些配置，不需要哪些配置；而最终打包生产环境时又需要哪些配置，不需要哪些配置：,webpack版本越新，打包的效果肯定更好,主要是打包后项目整体体积的优化，有利于项目上线后的页面加载速度提升,CSS代码压缩使用css-minimizer-webpack-plugin，效果包括压缩、去重,JS代码压缩使用terser-webpack-plugin，实现打包后JS代码的压缩,tree-shaking简单说作用就是：只打包用到的代码，没用到的代码不打包，而webpack5默认开启tree-shaking，当打包的mode为production时，自动开启tree-shaking进行优化,source-map的作用是：方便你报错的时候能定位到错误代码的位置。它的体积不容小觑，所以对于不同环境设置不同的类型是很有必要的。,开发环境的时候我们需要能精准定位错误代码的位置,生产环境，我们想开启source-map，但是又不想体积太大，那么可以换一种类型,使用webpack-bundle-analyzer可以审查打包后的体积分布，进而进行相应的体积优化,如果不进行模块懒加载的话，最后整个项目代码都会被打包到一个js文件里，单个js文件体积非常大，那么当用户网页请求的时候，首屏加载时间会比较长，使用模块懒加载之后，大js文件会分成多个小js文件，网页加载时会按需加载，大大提升首屏加载速度,开启Gzip后，大大提高用户的页面加载速度，因为gzip的体积比原文件小很多，当然需要后端的配合，使用compression-webpack-plugin,对于一些小图片，可以转base64，这样可以减少用户的http网络请求次数，提高用户的体验。webpack5中url-loader已被废弃，改用asset-module,我们要保证，改过的文件需要更新hash值，而没改过的文件依然保持原本的hash值，这样才能保证在上线后，浏览器访问时没有改变的文件会命中缓存，从而达到性能优化的目的,
© 版权声明
文章版权归作者所有，未经允许请勿转载。
">