大家好，我是毛小白，本文基于vue2，阅读全文大概需要3分钟。说到webpack优化，可能大部分人都看腻了。这只是一些技巧。之前看过很多类似的文章，但是自己并没有真正尝试过。下面是我在公司的项目中实际实践过的。首屏加载速度大幅提升（滑动），希望对您有所帮助。废话不多说，先来看看对比结果吧！类型优化前和优化后的js文件大小为24MB3MB。首页第一屏显示9s1s。这简直太夸张了，增加了8倍？可以想象之前有多慢，等了很久。漫王，真汉子，已经开过两次游戏了~可以看到优化前后首屏加载速度都有所提升。我一直想优化我们项目首屏的加载时间。有缓存还好，没有缓存就白屏了。等待7或8秒。尤其是对于一些第一次开机的客户来说，那7、8秒仿佛过了一个??世纪，非常尴尬。那我做了哪些常规操作呢？1.关闭生产环境中的productionSourceMap和csssourceMap。众所周知，当页面出现某些错误时，SourceMap可以定位到特定的代码行。SourceMap就是帮你建立这个映射关系，方便代码调试。在生产环境中，我们根本不需要开启这个功能（谁在调试生产环境的代码？又不是你），配置如下：constisProduction=process.env.NODE_ENV==='production'//判断是否为生产环境module.exports={productionSourceMap:!isProduction,//关闭生产环境中的SourceMap映射文件css:{sourceMap:!isProduction,//csssourceMap配置loaderOptions:{...othercode}},...othercode}here当你再次运行npmrunbuild打包时，你会发现速度快了很多，体积瞬间就只有几兆了！2.分析大文件，找出内鬼。安装npminstallwebpack-bundle-analyzer-D插件。打包后会产生一个本地服务，清楚的显示打包文件的包含关系和大小。vue.config.jsconfiguration:constBundleAnalyzerPlugin=require('webpack-bundle-analyzer').BundleAnalyzerPluginmodule.exports={...OtherconfigureWebpack:[plugins:[newBundleAnalyzerPlugin()//使用默认配置分析包大小]},...Others}自动弹出一个服务，清楚的显示打包后的js文件大小：从图中可以发现element-ui和ant-design占了近1/4的大小：1.53MB。exceljs也是个大东西：1.3MBBecharts.js文件也接近1MBmoment.js也有700KB。打包后js文件一共只有5MB，这五个哥们占了4M左右。不分析还好，一分析就毛骨悚然~别虚伪！找到刺后，将它们一根一根地拔掉。相信我，拔掉插头的过程非常爽。一一解决，拔掉荆棘1.必须用到的第三方js通过cdn的方式参考分析，发现必须用到elementui和echarts，而且打包比较费时，页面加载也很慢。可以直接通过CDN导入，方便快捷。1.element-ui是我们项目中使用的主要框架，所以这个肯定是少不了的，但是为什么项目中会有ant-design呢？原来有一个页面使用了antd的进度条组件，因为elementui的进度条不是那么漂亮。但是没想到这样导入了整个antd。解决办法：放弃antd组件，找一个类似的vue插件或者干脆自己实现一个。（这个方法短时间内无法完成，又不想触及之前的代码，所以暂时不考虑）使用antd进行部分加载。只加载需要的进度条组件可以减小文件大小（这种方法简单粗暴，就是牺牲一些文件大小）。我们按照antd官方文档使用方案2来配置一些组件的引入。安装npminstallbabel-plugin-import-D1main.jsimportrequiredcomponentsStepimport{Steps}from'ant-design-vue';Vue.component(Steps.name,Steps);Vue.component(Steps.Step.name,Steps.Step);2babel.config.js加上配置：module.exports={presets:['@vue/cli-plugin-babel/preset'],//下面是按需加载的配置+++++plugins:[["import",{libraryName:"ant-design-vue",libraryDirectory:"es",style:true}]]}现在再分析一下，antd已经小了很多。2.使用CDN加载第三方js。我们项目中有很多第三方js，有的打包的时候会很大，加载速度慢。我们将这些js分离出来，通过CDN直接在html中的script标签中使用。一方面减少了包装体积，另一方面提高了装载速度。这里推荐一个免费的cdn：BootCDN。您也可以使用自己购买的付费CDN服务。我们去网站搜索我们项目需要的js。比如：注意vue，一定要选择自己项目对应的版本，不然会出现各种奇怪的问题我的项目使用的是"vue":"^2.6.12",(package.json)第一步：配置vue。config.js，让webpack不打包这些js，而是通过script标签添加。constisProduction=process.env.NODE_ENV==='production'//判断是否为生产环境//官方环境不打包publicjsletexternals={}//存放cdn的文件letcdn={css:['https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.0/theme-chalk/index.min.css'//element-uicss样式表],js:[]}//必填只针对官方环境if(isProduction){externals={//排除打包好的jsvue:'Vue','element-ui':'ELEMENT',echarts:'echarts',}cdn.js=['https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js',//vuejs'https://cdn.bootcdn.net/ajax/libs/element-ui/2.6.0/index.js',//element-uijs'https://cdn.bootcdn.net/ajax/libs/element-ui/2.6.0/locale/zh-CN.min.js','https://cdn.bootcdn。net/ajax/libs/echarts/5.1.2/echarts.min.js',]}module.exports={//...其他配置configureWebpack:{//常用的publicjs排除，不打包但在index中addcdn,externals,//...其他配置},chainWebpack:config=>{//...其他配置//注入cdn变量（打包时会执行）config.plugin('html').tap(args=>{args[0].cdn=cdn//为插件配置cdnreturnargs})}//...其他配置}第二步：将定义的cdn变量添加到html模板代码中使用
