![](https://img-blog.csdnimg.cn/20201014180756913.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue项目优化
K
这个作者很懒,什么都没留下…
展开
-
优化vue项目(四)
通过import导入的第三方依赖包都会被合并到同一个文件中,这将导致打包出来的vue项目体积过大,因此可以通过加载外部CDN资源的方式来减小项目体积 通过externals节点加载外部CDN资源 1、在vue.config.js的发布模式下添加如下代码(都是一些需要优化的依赖包) config.set('externals', { vue: 'Vue', 'vue-router': 'VueRouter', axios: 'axios', .原创 2020-11-18 16:55:41 · 180 阅读 · 0 评论 -
优化vue项目(三)
在默认的设置下,vue项目的开发模式与发布模式都是共用同一个入口文件,即(src/main.js),为了将项目的开发模式与发布模式分离,我们可以为这两种模式各自指定打包的入口文件以达到项目优化的效果 为开发模式与发布模式指定不同的打包入口 一、开发模式的入口文件:src/main-dev.js 二、发布模式的入口文件:src/main-prod.js 1、创建main-dev.js与main-prod.js文件,两个文件内容一致 2、在配置文件vue.config.js中添加如下代码: 3、经检验,.原创 2020-11-18 16:18:40 · 213 阅读 · 0 评论 -
优化vue项目(二)
在项目开发阶段避免不了需要console.log();来查看一些开发需要的数据、打印的信息,但在项目发布阶段则不应该出现该warning;因此可以给vue项目进行优化,以实现build输出时移除console.log();打印出的数据的效果 babel-plugin-transform-remove-console 可以通过babel-plugin-transform-remove-console插件移除console.log(); 1、通过vue面板安装babel-plugin-transform-r.原创 2020-11-18 11:33:07 · 220 阅读 · 0 评论 -
优化VUE项目(一)
当完成一个vue项目时,通常需要再从整体做一个全面的检查,对各方面进行一个优化,以达到更好的上线效果 nprogress 可以通过第三方插件库nprogress做一个网页转换进度条 1、通过vue面板安装nprogress运行依赖 2、在main.js中导入NProgress包 3、使用NProgress.start();来显示进度条,使用NProgress.done();来隐藏进度条 到此为止,关于进度条的优化就大功告成! ...原创 2020-11-18 10:14:41 · 135 阅读 · 0 评论