vue打包优化
-
首屏加载慢
- 也是网络慢
- 资源也比较大
-
如下图,加载完需要15s......崩了...
image
-
配置到了!!!!!!!
- 这个不同环境的打包环境变量配置
image- 内容
- 其中 NODE_ENV 是关键
image -
vue.config.js 配置
``` let { VUE_APP_PROSRC: BASE_URL, NODE_ENV } = process.env const isProduction = NODE_ENV === 'production' let cdn = { css: [ ], js: [ '//cdn.bootcss.com/vue/2.5.21/vue.runtime.min.js', '//cdn.bootcss.com/vue-router/3.0.1/vue-router.min.js', '//cdn.bootcss.com/vuex/3.0.1/vuex.min.js', '//cdn.bootcss.com/axios/0.18.0/axios.min.js', '//cdn.bootcss.com/iview/3.4.1/iview.min.js' ] } ```- 这里用到
isProduction判断是否为打包进行注入 CDN资源
image - 这里用到
-
public/index.html
- 查了下
head中的 link 引入 js 是进行 js 的预加载,其实真正加载是在最后
image
- 查了下
- 注意:
- 我在 index.html 引入了 iview.css 这样在任何环境都会通过 CDN 加载.
- 要将 main.js 中引用 iview.css 删除,不然还会降 css 进行打包.
结束看效果
-
DOMContentLoaded / load 时间都成为 1s, 比之前的 14/15s 翻天覆地变化
image
