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