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

生产环境

• 平时咱们开发时，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文件的大小，而且能够打开看看里面的内容，寻找你的优化点~这是我项目的优化过程，大都只讲思路，没有涉及很具体，可能还有些缺陷和错误，欢迎批评指教，一块儿交流学习。