vue项目生产环境下的一些配置以及优化

jsummer 发布于2019-08-22 15:44 / 2914人阅读

摘要：还会生成一个存放公共样式的文件，在首次打开的时候就加载完毕配置优化隐藏控制台信息在文件下补充代码不显示控制台打印信息隐藏源码在下的里改为即可。当再次时会生成文件在控制台的可以看到加载的文件优化效果明显，单个文件至少能缩小一半以上。

生产环境

平时我们开发时，npm run dev的环境是开发环境；而部署到线上时，npm run build的环境是生产环境，代码会被打包，放到新生成的dist文件夹下；

图标资源等会被转为base64,当图片小于一定的大小时，图片就会被转为base64,这个大小可以在webpack配置里设置，在webpack.base.conf.js下：

//图片压缩
new ImageminPlugin({
  disable: process.env.NODE_ENV !== "production", // Disable during development
  pngquant: {
    quality: "95-100"
  }
}),

但是有个注意点就是用base64转过的图标会比原来的那个图的大小大30%~40%(可以将你图片转成的base64然后保存成文本对比图片的大小)

每个vue文件中的js和css都会被压缩然后多带带打包成一个js，每次打开一个页面，就会相应的去加载那个js文件；

还会生成app.js, vendor.js, manifest.js

每当我们点击一个页面就会去加载一个js文件（第二次点击读的就是缓存），这个js文件就是webpack打包的关于这个页面的压缩代码。

还会生成一个存放公共样式的css文件，在首次打开的时候就加载完毕

配置优化

隐藏控制台信息

在webpack.prod.conf.js文件下补充代码：

new webpack.optimize.UglifyJsPlugin({
  compress: {
    warnings: false,
    /*不显示控制台打印信息*/
    drop_debugger: true,
    drop_console: true,
    pure_funcs: ["console.log"]
  },
  sourceMap: false
})

隐藏源码：

在config/index.js下的build里:
productionSourceMap: true改为productionSourceMap：false即可。

开启gZip压缩

在config/index.js中：
将false改为true即可。

productionGzip: true

当再次npm run build时会生成.gz文件：

在控制台的network可以看到加载的js文件

优化效果明显，单个js文件至少能缩小一半以上。

代码优化

代码优化其实要试具体项目而定。

路由肯定要按需加载

component: resolve => require(["path/component.name"], resolve)

如果组件在多个地方引用到，那么最好是将组件抽成公共组件，在main.js中注册全局组件

Vue.component("component-name", componentName)

这样组件可在全局直接引用，不用每次先import又局部注册。
这样做的目的也是为了缩小js文件的体积，当你的组件在三个地方用到而你分别引入了三次，打包的时候你的组件代码会被压缩到三个不同的js文件中，也就是被压缩了三次；如果注册为全局组件，则代码只会被压缩到app.js中(只被压缩一次)

公共的函数和公共的css文件也是同样的道理

可以将你的公共样式文件在main.js中引入，至于公共函数的话，可以挂在到vue下，全局可调用

Vue.prototype.functionName = functionName

图片的大小

图片的大小太大直接影响js文件的大小，所以压缩图片是很必要的。如果UI没有帮我们压我们就自己压。http://tinypng.com/

结语

为了缩小项目的体积，几kb都要争取能减少就减少的。尽量将能抽取的代码抽取，可以看控制台的network里各个js文件的大小，并且可以打开看看里面的内容，寻找你的优化点~
这是我项目的优化过程，大都只讲思路，没有涉及很具体，可能还有些缺陷和错误，欢迎批评指教，一起交流学习。

GPU云服务器云服务器 java项目配置环境服务器配置以及价格生产环境测试环境测试环境生产环境

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93699.html

Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两年前...

Richard_Gao 2019-05-22 18:23 评论0 收藏0
Vue+Express全栈购物商城

摘要：一前言提纲基于和框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。服务端技术栈登录授权用认证机制，来实现登录登出。服务器配置和缓存策略，根据不同的来代理。申请证书全站升级到，配置的协议。一、前言提纲基于Vue和Express框架写的一个全栈购物商城，记录项目过程中遇到的一些问题以及经验和技巧。二、历史版本基于Vue-CLI2.0:点我查看这个分支版本是一两...

luzhuqun 2019-08-26 13:50 评论0 收藏0
webpack4.x升级摘要

摘要：以为例，编写来帮助我们完成重复的工作编译压缩我只要执行一下就可以检测到文件的变化，然后为你执行一系列的自动化操作，同样的操作也发生在这些的预处理器上。的使用是针对第三方类库使用各种模块化写法以及语法。 showImg(https://segmentfault.com/img/bVbtZYK); 一：前端工程化的发展很久以前，互联网行业有个职位叫做软件开发工程师在那个时代，大家可能...

levinit 2019-08-23 18:11 评论0 收藏0
vue项目搭建以及全家桶的使用详细教程

摘要：前言是现阶段很流行的前端框架，很多人通过官方文档的学习，对的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及全家桶其他框架的使用，以下将详细地介绍本人在处理工程文件构建的过程对前言 vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎...

simon_chen 2019-08-30 15:54 评论0 收藏0
vue项目搭建以及全家桶的使用详细教程

摘要：前言是现阶段很流行的前端框架，很多人通过官方文档的学习，对的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎么更好的管理自己的项目，如何去引入一些框架以及全家桶其他框架的使用，以下将详细地介绍本人在处理工程文件构建的过程对前言 vue是现阶段很流行的前端框架，很多人通过vue官方文档的学习，对vue的使用都有了一定的了解，但再在项目工程化处理的时候，却发现不知道改怎...

curlyCheng 2019-08-02 13:55 评论0 收藏0