webpack的打包优化一直是个老生常谈的话题，常规的无非就分块、拆包、压缩等。 本文以我自己的经验向大家分享如何通过一些分析工具、插件以及webpack新版本中的一些新特性来显著提升webpack的打包速度和改善包体积，学会分析打包的瓶颈以及问题所在。 webpack 有时候…

用vue开发项目上线以后，发现首页加载速度非常慢，如果项目比较大，甚至可能出现10s以上的等待。用户体验非常差，试想如果你准备买一双AJ，登录某宝首页等了足足5s，那肯定果断选择某多多了。

webpack只能处理js模块，在js中加载图片模块时需要借助file-loader。如 url-loader可以把较小的图片转化成base64数据，从而减少对图片资源的http请求。同时打包文件也会变大； 当图片大小超过设置的限制（limit）时，默认采用file-loade…

对于使用vue开发项目的FE来说,打包上线这个环节相信大家都不陌生。本文主要是介绍如何通过webpack(实践版本:webpack4.16.5)的配置来提高打包构建速度以及减小包的体积。 使用optimize-css-assets-webpack-plugin 来压缩css。在…

找到原因，是 Highcharts 和 Element-UI占了较大体积，导致性能减弱。 程序小哥实战经验得出：外链简单粗暴，而拆包可以配合浏览器缓存，在每次发布最小化更新资源，比较实用。 考拉前端开发小哥Bingo，潜心钻研小程序开发。

以上是笔者平时针对自己项目或者公司项目累积的一点vue项目打包优化知识，也许你有更好的优化点，或者更好的优化方案，欢迎提供案例，学习学习。

vue 官方为了让开发者快速进行开发，为了很大的精力，提供了vue-cli脚手架，只需简单几步，就能开始vue的开发了。 然而，对项目里的webpack封装和配置了解的不清楚，就容易导致出问题不知如何解决，甚至不会通过webpack去扩展新功能，对webpack+vue项目究竟…

npm init 初始化项目，会生成package.json. 此时项目就拥有装有的node_modules运行环境。 并根据提示安装需求的依赖包。如css-loadervue-template-complier vue无法在浏览器中直接运行，将vue组件挂载到js，然后通过w…

url-loader对未设置或者小于limit设置的图片进行转换，以base64的格式被img的src所使用；而对于大于limit byte的图片用file-loader进行解析。 minify 使用minify会对生成的html文件进行压缩。默认是false cache 默认…