树上骑个猴的博客

本文用项目例子是用Vue Cli3搭建的Vue项目 如果小伙伴有做过首屏加载时间优化，应该会遇到chunk-vendors.js这个文件，巨大无比，加载时间超长，是首屏加载时间过长的罪魁祸首之一。 下面通过一个实际的项目来演示，先通过插件webpack-bundle-analyzer来可视化地查看chunk-vendors.js这个文件里面地内容。 npm install webpack-bundle-analyzer --save-dev 在vue.config.js中引入这插件 const Bu.

项目开发完后，打包后发现生成的chunk-vendors.js特别大，接近30M。为了优化项目性能，需要使用webpack-bundle-analyzer分析包文件，找出最占用空间的插件有哪些，对应做出优化。 安装 npm install webpack-bundle-analyzer -D 修改vue.config.js module.exports = { chainWebpack: config => { if (process.env.use_analyzer) {

开发阶段，我们会编写大量的 console 语句用于测试 使用 build 命令打包时，会作为警告提出，因为上线之后，这些 console 语句是没有任何作用的，所以警告你应该移除 挨个文件手动删除的方法，会有两个问题 耗时耗力 代码中其实还是需要console的，只是打包后，希望生成的文件中不包含而已 babel-plugin-transform-remove-console 比较流行的解决办法是使用 babel 的一个插件，因为webpack 打包时会使用 babel 进行代码降级，所以babel 插

这个是优化之前项目打包后dist目录文件大小，约为20.6MB 打包后里面的js文件 打包后每个js文件都有一个map文件 map文件的作用：项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。 有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。 productionSourceMap: 改成false后 优化后，打包目录大小 优化后打包目录里的前端文件 productionSourceMap: 改成false后 所有打包生成的map文件

抽象语法树 使用speed-measure-webpack-plugin插件，查看各个打包部分耗时： 一，缩短解析时间 优化的方法两种方法： 方法二导入后，就可以在webapck.base.js文件中对比较耗时的部分使用thread-loader，比如html、js、css的部分。 优化的第三种方法： 使用缓存，使得二次打包的时候速度可以加快。(比如第二次打包与第一次打包相比，只有少部分文件存在修改，那么没有修改的部分使用缓存即可) 在thread-loader和cache-loader一起使用的.

原文链接： https://mp.weixin.qq.com/s?__biz=MzUyNDYxNDAyMg==&mid=2247488813&idx=1&sn=0afa7c1bd34f92c03da94c6830e740f2&scene=21#wechat_redirect