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文件中的jscss都会被压缩然后单独打包成一个js, 每次打开一个页面,就会相应的去加载那个js文件;
  • 还会生成app.js, vendor.js, manifest.js

clipboard.png

每当我们点击一个页面就会去加载一个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文件:

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

clipboard.png

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

代码优化

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

  • 路由肯定要按需加载

发表评论

提供最优质的资源集合

立即查看 了解详情