vue编译JS文件过大的优化方案

简介

想要进行优化，首先我们要知道问题所在，那么最好的方法就是用数据说话，这里我们就要用到webpack一个分析的插件webpack-bundle-analyzer。

webpack-bundle-analyzer的插件使用

这里我针对vue-cli 3.0来讲解，首先

npm i webpack-bundle-analyzer –save-dev

然后vue.config.js进行配置

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
	configureWebpack: config => {
	    if (process.env.NODE_ENV === 'production') {
	      return {
	        plugins: [
	          new BundleAnalyzerPlugin()
	        ]
	      }
	    }
	}
}

再然后，package.json配置启动命令，由于需要设置打包环境，而每个终端的对于环境变量的设置不一样，所以在这里还需要借助cross-env

npm i cross-env --save-dev 

  "scripts": {
    "analyze": "cross-env NODE_ENV=production npm_config_report=true npm run build"
  },

最后打包分析

npm run analyzee

这时候会弹出一个页面

这里可以看到，vendors stat size 达到4.8M，如果朋友你现在也打开如上图这个界面，你可以悬浮到块上
查看每一个文件的大小，你就发现，占大头的就是echarts,element-ui，那么，接下来，我就介绍下我所了解到的方法。

路由懒加载

原理就是利用import()函数，这个在vue-router官网讲的很清楚了，这里就不讲解了。

使用CDN外部链接

上文已经提过，echarts占了很大的体积，那么，咱们就可以考虑使用外部引用，方法如下：

• 在public/index.html引入echarts的CDN链接
• 删除之前引入echarts所有代码
• 在vue.config.js声明echarts是外部引入文件

const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin

module.exports = {
	configureWebpack: config => {
	    if (process.env.NODE_ENV === 'production') {
	      return {
	        plugins: [
	          new BundleAnalyzerPlugin()
	        ],
	       externals: {
        		"echarts": "echarts"
  		    },
	      }
	    }
	}
}

然后设置完之后，在打包分析下，如下图
可以明显看到总体积变为1.94M了，当前，如果你的项目是私有化而且没有自己的CDN是不建议用的。

gzip

这个就是服务端开启gzip或者用Nginx，因为gzip可以在可以在你代码压缩的情况下，体积还会相应压缩50%。

未完待续

以上是我所了解到的，但我相信不只这些，只是我没研究到，以后如果有好的优化方案，我还会和大家分享的。