Vue项目打包后js文件压缩

html-css010

Vue项目打包后js文件压缩,第1张

这段时间因为免费试用了 https://free.aliyun.com/ 一台阿里云的服务器,配置是 2核4G 2M,

因为带宽太低了,每次在第一次加载的时候太慢了,通过F12调试,发现主要是因为加载的 js 过大而引起的。因此本文将主要讲解Vue项目打包后js、css、svg等文件过大的解决办法。

通过引入 compression-webpack-plugin 插件来打包,然后开启 nginx gzip 来解决问题

配置 compression-webpack-plugin 前后打包对比,我们查看 dist目录,能够发现大于10KB的 js css 等文件已经被压缩了

vue压缩后的js可以反编译出来,反编译方法为:

1、在桌面找到自己下载的浏览器软件,点击浏览器图标。

2、在浏览器中随便找个网址登入。

3、在网页上右键鼠标,弹出右键菜单中选择“审查元素”选项(或按F12),弹出开发工具弹框,在弹框中选择“Sources”选项。如下图所示。

4、在左侧网络文件列表中随便找个js文件(如:mt_show_1.8.js文件),点击该文件并查看文件内容。发现文件一行展示证明被压缩过了。

5、找到该文件内容左下角的“{}”标签,找到后并点击该标签。

6、随后左侧会生成一个格式化后的文件(如:mt_show_1.8.js:formatted文件),查看js文件内容,内容展示成正常的格式了。现在就可以读懂里面的代码了。