Vue-cli3.0打包优化实践

1. gzip压缩
   vue.config.js

	npm i --save-Dev compression-webpack-plugin
    const CompressionWebpackPlugin = require('compression-webpack-plugin')
	const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
	module.exports = {
		configureWebpack: config => {
		    if (process.env.NODE_ENV === 'production') {
		      const plugins = []
		      plugins.push(
		        new CompressionWebpackPlugin({
		          filename: '[path].gz[query]',
		          algorithm: 'gzip',
		          test: productionGzipExtensions,
		          threshold: 10240,
		          minRatio: 0.8
		        })
		      )
	     	 config.plugins = [...config.plugins, ...plugins]
    		}
 	 }
}

nginx.conf

http{
	  gzip on; 
      gzip_static on;
      gzip_buffers 4 16k;
      gzip_comp_level 5;
      gzip_types text/plain application/javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
}

2.去console插件

const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
plugins.push(
  new UglifyJsPlugin({
    uglifyOptions: {
      compress: {
        warnings: false,
        drop_console: true,
        drop_debugger: false,
        pure_funcs: ['console.log'] //移除console
      }
    },
    sourceMap: false,
    parallel: true
  })
)

3.去除多余无效的 css（测试后把我没写在scoped里面的样式好像删了。。。）

plugins.push(
        new PurgecssPlugin({
          paths: glob.sync([
            path.join(__dirname, './src/index.html'),
            path.join(__dirname, './**/*.vue'),
            path.join(__dirname, './src/**/*.js')
          ])
        })
      )

4.cdn加载文件（打包的时候是小了几k,不知道怎么配开发环境）
vue,router,vuex,通过cdn导入，然后在各个文件里面加上

if(process.env.NODE_ENV === 'production'){
//vue.use(Router)
//vue.use(vuex)
}
config.externals: {
            vue: "Vue",
            vuex: "Vuex",
            "vue-router": "VueRouter",
        }

2019.3.12