项目上线后，浏览器第一次加载会特别特别慢，network中看到vendorjs文件1.9M，不慢才怪。

echarts按需引入后，也有1.1M左右，由于对vue脚手架理解不深，自己扒了大量的文档，又测

试了很多次，才测试成功，暂时简单记录下。

npm run build --report

可以查看文件的大小分布 罪魁祸首是elementui和echarts()

1- app.js存放页面中的js操作，使用路由的按需加载，可把app.js分隔成多个小的js文件

此时分隔好的js文件要看各页面中的业务代码量，其中我这里单独的一个图表页还是很大，

800k左右，又是echarts的锅。暂时放这。

2- vendorjs中是项目中所有引用的依赖包，即使用的vue、eleui、axios等等插件框架什么

的都在这里边，怪不得大。

参考文档，找到以下解决方法：

　　# cdn引入插件

　　# 打包时使用Gzip

2.1- cdn引入：

　　1.index.html文件中引入link/script引入(cdn或ukg链接)

　　2.build/webpack.base.conf.js中添加external配置，webpack打包时会跳过配置中的插件

　　3. 去除import...from..和use什么的，不去除照样会打包，其他照常

　　然后就OK了，我看到的文档大都是这样的，不是很清晰哈，那看代码

index.html (tips: 先后顺序、引入的地方)

 <!DOCTYPE html>

 <html>

   <head>

     <meta charset="utf-8">

     <meta name="viewport" content="width=device-width,initial-scale=1.0">

     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

     <title>myapp</title>

   </head>

   <body>

     <div id="app"></div>

     <!-- built files will be auto injected -->

     <script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>

     <script src="https://cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js"></script>

     <script src="https://unpkg.com/element-ui/lib/index.js"></script>

     <script src="https://cdn.bootcss.com/echarts/4.2.0-rc.2/echarts-en.min.js"></script>

   </body>

 </html>

webpack配置

 module.exports = {

   context: path.resolve(__dirname, '../'),

   entry: {

     ....

   },

   externals: {

     // 要引入的资源的名字：该模块提供给外部引用的名字(由对应的库自定)

     'vue': 'Vue',

     'vue-router': 'VueRouter',

     'element-ui': 'ELEMENTUI',

     'echarts': 'echarts'

   },

   output: {

   　　....   }

main.js中 (tips: 文件中import router from './router'  并不是引入的vueRouter 看路径)

// import Vue from 'vue'

import App from './App'

// 这里不是引入的vueRouter

import router from './router'

// import ElementUI from 'element-ui'

// import 'element-ui/lib/theme-chalk/index.css'

// import echarts from 'echarts'

Vue.config.productionTip = false

// Vue.use(ElementUI)

// Vue.prototype.$echarts = echarts

/* eslint-disable no-new */

new Vue({

  el: '#app',

  router,

  components: { App },

  template: '<App/>'

})

router/index.js文件下 （tips: 脚手架中初始使用的为router  这里要改为VueRouter 原因看external那一步）

 // import Vue from 'vue'

 // import router from 'vue-router' // 这里才是引入的路由

 import HelloWorld from '@/components/HelloWorld'

 // Vue.use(VueRouter)

 export default new VueRouter({

   routes: [

     {

       path: '/',

       name: 'HelloWorld',

       component: HelloWorld

     }

   ]

 })

这样配置好之后，开发环境下，项目照常是可以运行的，打包后查看文件大小分布，真香。

补充： vue项目中刚开始用的时候直接全局使用的echarts，即添加原型链那一步，页面中可以直接使用this.$echarts访问实例

后改用页面中直接var echarts = require('echarts')按需引入，页面中访问可以直接echarts.init()什么的，在使用cdn引入echarts

按需引入那里照常会打包到vendorjs中，因为 require引入使和import作用是一样的（引入插件），其他区别自行百度。

所以：echarts cdn引入后页面中直接使用echart.init()等方法即可，添加原型链也可以，页面中还是this.echarts访问

项目中如果是使用了Eslint插件，会报错。所以主要还是看页面能不能正常运行

2.2： Gzip打包

　　1.下载插件

　　2.开启使用插件（cli自带配置）

下载插件

npm install compression-webpack-plugin

需要查看下webpack.base中的配置中的输出配置，然后决定下载哪个版本的压缩插件

output: {

    path: config.build.assetsRoot,

    filename: '[name].js', // 看这里

    publicPath: process.env.NODE_ENV === 'production'

      ? config.build.assetsPublicPath

      : config.dev.assetsPublicPath

  }

查看官方文档会发现，最新版本的这个插件的filename换成了assetsname，所以我这里下载的时候后面加上版本号@1.0.0-beta.1

(这里的vuecli为2.x，vuecli3.x的可以直接npm i compression-webpack-plugin)

然后config/index.js中把productionGzip: false，改为true即可

tips: 关闭sourcemap打包的速度可以提升很多

打包后你会发现，文件的下面会多一个后缀为.gz的文件，这个就是gzip格式的文件了，如果有这个文件，网站在和服务器连接的时候

会启用gzip格式文件，渲染速度就提升上去了。

ps：先写这么多，想起来会再补充。

19.01.20更  打包之后出现了gzip文件之后并不是就完事了。

线上环境，向服务器请求资源的时候，请求头里会有这么个东西 Accept-Encoding: gzip, deflate, br（三种编码方式）

如果服务端配置好了的话，在响应头中会有Content-Encoding: gzip 这里就说明服务端返回的文件编码方式为gzip的

也就是说 此处优化完成。

vuecli开发项目，文件打包后，appjs/vendorjs文件过大的更多相关文章

  1. vue-cli开发项目，调用html5+接口，hbuilder真机运行，打包

    开发中使用vue-cli正常开发 将配置文件中的路径改为相对路径--否则在打包之后真机运行时无法找到指定路径 开发完或者开发途中想要查看调用h5+的api效果就需要打包了 npm run build ...

  2. eclipse开发工具Import工程后，工程文件夹上出现黄色感叹号——解决方法

    eclipse开发工具Import工程后,工程文件夹上出现黄色感叹号. 可能是Work目录无效,解决方法:删除Work目录即可,如下图所示: 删除后,如下图:

  3. java将文件打包成ZIP压缩文件的工具类实例

    package com.lanp; import java.io.BufferedInputStream; import java.io.BufferedOutputStream; import ja ...

  4. 配置vue项目将打包后图片文件的引用路径改为cdn路径?

    vue cli3项目, 需求: 图片文件打包时, 将项目内的所有图片文件的引用地址改为cdn路径 vue cli3的默认配置下, 打包后图片使用的是相对路径, 例如打包后项目内图片引用路径为 img/ ...

  5. springboot在eclipse中运行使用开发配置，打包后运行使用生产环境默认配置

    java命令运行springboot jar文件,指定配置文件可使用如下两个参数中其中一个 --spring.config.location=配置文件路径 -Dspring.profiles.acti ...

  6. vue-webpack项目自动打包压缩成zip文件批处理

    为什么需要这个? 使用vue框架开发项目,npm run build这个命令会一直用到,如果需要给后端发包,那你还要打包成zip格式的压缩包,特别是项目提测的时候,一天可能要执行重复好几次,所以才有了 ...

  7. Vue -- webpack 项目自动打包压缩成zip文件

    这段时间用 Vue2.0 开发项目,每次打包都会用到 npm run build 命令,但是每次部署时给后端发包都要手动zip压缩,这样一两次还行,但遇到项目板块测试和临时加急功能测试的时候,一天可能 ...

  8. vue项目webpack打包后修改配置文件

    从webpack打包结构中我们知道,vue中有一个存放外部资源的文件夹static,它里面的文件是不会被打包编译的,所以我们就可以利用外部引入js的方式将我们的想要的数据在index.html中以js ...

  9. vue项目 webpack打包后，图片路径是绝对路径

    vue项目,使用webpack打包,虽然在全局把路径改成了相对的路径,但是图片引用的路径还是异常的,解决办法如下: 1.config文件夹下index.js中: assetsPublicPath:&q ...

随机推荐

  1. zabbix如何添加主机监控

    1,首先,监控的主机安装zabbix客户端.zabbix提供多种监控方式,我们这里监控的主机上边安装agentd守护端进行数据收集并监测. 其中客户端安装我们这里就不介绍了,请参考之前教程里边的客户端 ...

  2. [CF348B]Apple Tree

    https://www.zybuluo.com/ysner/note/1300249 题面 给一棵大小为\(n\)的树,树的每个叶子节点上有权值. 定义一颗树平衡:对于每一个结点\(u\)的子树都拥有 ...

  3. openStack Aio 环境的neutron agent-list和cluster 环境 CLI结果对比

  4. Linux系统下 为命令配置别名

    1.什么是别名 在管理和维护Linux系统的过程中,将会使用到大量命令,有一些很长的命令或用法经常被用到,重复而频繁的输入某个很长命令或用法是不可取的.这时可以使用 别名 功能将这个过程简单化. Li ...

  5. （进制）51NOD 1057 N的阶乘

    输入N求N的阶乘的准确值.   Input 输入N(1 <= N <= 10000) Output 输出N的阶乘 Input示例 5 Output示例 120解:这其实是MOD进制,将一个 ...

  6. $CF19A\ World\ Football\ Cup$

    炒鸡\(6\)批的模拟题. 注意的是输入 把握好空格 大小写. 根据题目的这句话来排序 积分榜是按照以下原则制作的:胜利一个队得3分,平分1分,失败0分. 首先,球队按积分顺序排在积分榜上,分数相等比 ...

  7. POJ 2194 2850 计算几何

    题意: 给你了n个圆,让你摞起来,问顶层圆心的坐标 (数据保证间隔两层的圆不会挨着) 思路: 按照题意模拟. 假设我们已经知道了一层两个相邻圆的坐标a:(x1,y1)和b:(x2,y2) 很容易求出来 ...

  8. 区间DP UVA 11584 Partitioning by Palindromes

    题目传送门 /* 题意:给一个字符串,划分成尽量少的回文串 区间DP:状态转移方程:dp[i] = min (dp[i], dp[j-1] + 1); dp[i] 表示前i个字符划分的最少回文串, 如 ...

  9. hihocoder #1698 假期计划 （排列组合+费马小定理+乘法逆元）

    Description 小Ho未来有一个为期N天的假期,他计划在假期中看A部电影,刷B道编程题.为了劳逸结合,他决定先拿出若干天看电影,再拿出若干天刷题,最后再留若干天看电影.(若干代指大于0)  每 ...

  10. 题解报告：hdu 5695 Gym Class（拓扑排序）

    题目链接:acm.hdu.edu.cn/showproblem.php?pid=5695 Problem Description 众所周知,度度熊喜欢各类体育活动.今天,它终于当上了梦寐以求的体育课老 ...