前端性能优化应该怎么做？( 二 ) _前端

文章插图
图片
结果：热更新时间降低到4秒左右，降低50% 。
构建包大小优化CDN资源替代项目依赖包利用Webpack模块可视化工具，项目中的依赖是这样的：

文章插图
图片

文章插图
图片
从上图可以看到：在开发环境整个构建包体积达到了19.44MB，echarts、antv、moment这些包，体积都比较大，达到了MB量级，并且在项目中前两者使用频率很低，只有引用过一次，对于这种情况，考虑将依赖包转换为CDN引入的方式，原因如下：

减少打包产物大?。?/li>
减少白屏时间；
版本固定，使用频率低，通过CDN单独引入还会有浏览器强缓存的效益；

通过Webpack中externals ，取消对于node_modules中枚举包的计算，并且在项目index.html中从CDN引入所列举到的包。
{ // ..."externals": {"echarts": "echarts","moment": "moment"},}externals这里的key、value值分别对应npm中的包名和CDN引入后在window下的全局变量名，找包的CDN路径很简单，但是如何知道全局变量名是什么呢？
可以打开CDN链接，格式化代码，大概是这个样子的：

function(e, t) {"object" == typeof exports && "object" == typeof module ? //判断环境是否支持commonjs模块规范module.exports = t(require("vue")) :"function" == typeof define && define.amd ? //判断环境是否支持AMD模块规范define("ELEMENT", ["vue"], t) :"object" == typeof exports ? //判断环境是否支持CMD模块规范exports.ELEMENT = t(require("vue")) :e.ELEMENT = t(e.Vue)} ("undefined" != typeof self ? self: this,function(e){//省略...});

从这个JS文件可以看到，这个全局变量是ELEMENT咯~这块更详细的教程可以看一下这篇文章，这位博主总结的很全：
Webpack系列』—— externals用法详解
代码分割这里利用Webpack现有的能力，对使用频繁的第三方库和模块进行统一抽离，这一部分可以写在上面提到的Ice中间件里去：

module.exports = ({ onGetWebpackConfig }) => {onGetWebpackConfig((config) => {config.optimization.splitChunks({cacheGroups: {vendor: {priority: 1,test: /node_modules/,chunks: 'initial',minChunks: 1,minSize: 0,name: 'vendor',filename: 'vendor.js',},common: {chunks: 'initial',name: 'common',minSize: 100,minChunks: 3,filename: 'common.js',},},});});};

抽离出来的模块如图：