Vue-cli3.0パッケージ最適化の実践

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.コンソールプラグインへ

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