欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue -- vue-cli(vue脚手架) npm run build打包优化

程序员文章站 2022-12-23 08:26:30
vue-cli(vue脚手架) npm run build打包优化。加载图片过多,过大时,加载缓慢;部署包过大,上传缓慢 ......

  这段时间公司新项目立项,开发组选用 vue2.0 进行开发。当然也就一并用到 vue cli 进行自动化构建。结果在基础版本开发完成后,用 npm run build 命令打包上线时,发现以下几个问题。虽然这些问题对项目正常运行影响不大,但是却对性能影响比较大

  1、加载图片过多,过大时,加载缓慢;  2、部署包过大,上传缓慢;

本来想偷个懒,优化的事放到以后再说,但是每次上传服务器,包太大自己都感觉不爽。所以索性先优化了再说!

1、加载图片过多,过大时,加载缓慢;

  原因:

  解决方案:

2、部署包过大,上传缓慢

  原因一:vue-cli npm run build 命令打包时默认会把 dependencies 中的依赖统一打包,这就导致打包后的 vendor.js 文件过大,从而使得首次启动时下载 vendor.js 缓慢。

  解决方案:像vue、axios、element-ui、iview 这些引入以后基本不会再进行修改的依赖可以通过cdn引入(当然前提是可以接入外网,而且网速不错),不必要打包到 vendor.js 中。具体写法如下:

  ①在项目 根目录 index.html 使用cdn节点引入各种依赖(前端所需的各种依赖安装大部分都可以在 https://cdn.bootcss.com/  上找到)

<!-- 先引入 vue -->
<!--开发环境-->
<script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.17/vue.js"></script>
<!--生产环境-->
<!--<script src="https://cdn.bootcss.com/vue/2.5.17/vue.min.js"></script>-->
<!-- 引入axios -->
<script type="text/javascript" src="https://cdn.bootcss.com/axios/0.18.0/axios.min.js"></script>
<!-- 如果使用element-ui  则引入element-ui, 没找到index.min.js-->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/element-ui/2.4.9/index.js"></script>
<!-- 如果使用iview  则引入iview-->
<script type="text/javascript" src="https://cdn.bootcss.com/iview/3.1.4/iview.min.js"></script>
<!-- 两个ui框架可以同时添加,冲突覆盖很少-->

    ②在项目 根目录 build/webpack.base.config.jsmodule.exports 内添加 externals

externals: {
    'vue': 'vue', 
    'axios':'axios',
    'element': 'element-ui'
},

    ③在项目 根目录 src/mian.js  中将以上通过cdn已经引入的依赖 import ... from ... 删除(如:import vue from 'vue'),若没有删除则webpack还是会把对应的依赖进行打包。

  原因二:vue-cli npm run build 命令打包时默认会生成 相对应的map文件,从而导致打包后的整个 static文件夹 过大(尤其是vendor.js.map最大),使得部署和上传缓慢。项目打包代码经过压缩加密以后,如果运行时报错,输出的错误信息根本无法精确定位是哪里的代码报错。但map文件就可以像未加密的代码一样,准确的输出是哪一行哪一列报错,这就是map文件的用处。(但是实际在项目上线之前会将所有的调试代码和日志代码全部删除,就算有map文件存在,实际上你也不知道在哪报错。除非是系统性bug导致系统卡死了,浏览器抛出错误,既然都是系统性bug了那么根本不能上线,所以map文件个人觉得没必要存在!)

    Vue -- vue-cli(vue脚手架)  npm run build打包优化

  解决方案:将map文件干掉,当然这个干掉不是手动删除,而是在webpack打包时不产生map文件。

    在项目 根目录 config/index.js  中  build 内找到  productionsourcemap: true, 把 true改为false从而重新打包以后,系统就不会自动生成 map文件了。

    Vue -- vue-cli(vue脚手架)  npm run build打包优化

  Vue -- vue-cli(vue脚手架)  npm run build打包优化

  原因三:vue-cli npm run build 命令打包时 压缩优化不彻底。这里 webpack 其实自带有一个优化打包的方法(gzip 文件压缩),只是 vue-cli 默认没有使用。

  解决法案:①在项目 根目录config/index.js  中  build 内找到  productiongzip: false, 把 false改为true与 productionsourcemap 刚好相反

    Vue -- vue-cli(vue脚手架)  npm run build打包优化

        ②安装插件 compression-webpack-plugin  注:安装的时候带上版本号,现在 compression-webpack-plugin 2.0已出,默认该命令安装最新版,最新版本和当前的webpack不匹配,要报错。 

cnpm install --save-dev compression-webpack-plugin@1.1.12            //1.1最新版

        ③compression-webpack-plugin安装完成后,npm run build 执行后会发现js文件夹内每个js文件都有一个相对应的gz后缀文件,而且gz文件比相对应的js文件小很多。浏览器如果支持 g-zip 会自动查找有没有gz文件找到了就直接加载gz文件然后本地解压并执行

 

这一连串捣鼓操作完成后,再来看压缩后的两个dist文件夹,这区别那是大大的!

  Vue -- vue-cli(vue脚手架)  npm run build打包优化    Vue -- vue-cli(vue脚手架)  npm run build打包优化