vue项目打包文件过大优化

总结一下前端打包优化，我用的是vue-cli3     配置文件vue.config.js

一、路由懒加载

每次进入一个新页面才加载该页面所需要的资源

component: () => import('@/view/setting/setting.vue')

二、把不常改变的库放到index.html中，通过cdn引入

最好引入指定版本，避免更新导致项目出错，从package.json文件查看版本

然后找到文件vue.config.js,（ 我用的是vue-cli3不同版本设置不一样，老版本是build/webpack.base.conf.js ），在 module.exports = { } 中添加以下代码，这样webpack就不会把这些库打包了。

	configureWebpack:config => {
		config["externals"] ={
				 'vue':'Vue',
				 'vue-router':'VueRouter',
				 'vuex':'Vuex',
				 'axios':'axios',
				 'view-design':'iview',
				 'vue-baidu-map':'BaiduMap',
				 '@babel/polyfill':'@babel/polyfill',
				 'es6-promise':'ES6Promise'
		    }
		  // if(process.env.NODE_ENV==='production'){
			 //  return{
				//   plugins:[new CompressionPlugin({
				// 	  test:/\.js$|\.html$|\.css/,
				// 	  threshold:10240,
				// 	  deleteOriginalAssets:false
				//   })
					  
				//   ]
			 //  }
		  // }
	  },

 

在所有使用vue的地方注释掉引入的vue等包，但是Vue.use(axios)、Vue.use(VueRouter)、Vue.use(vuex)等依然要使用

三、使用gzip压缩

安装插件

npm install compression-webpack-plugin

配置vue.config.js

先引入插件

const CompressionPlugin = require('compression-webpack-plugin');

在module.exports中添加下方module.exports内的代码。

configureWebpack:config => {
		//cdn引入
		// config["externals"] ={
		// 		 'vue':'Vue',
		// 		 'vue-router':'VueRouter',
		// 		 'vuex':'Vuex',
		// 		 'axios':'axios',
		// 		 'view-design':'iview',
		// 		 'vue-baidu-map':'BaiduMap',
		// 		 '@babel/polyfill':'@babel/polyfill',
		// 		 'es6-promise':'ES6Promise'
		//     }
		  //gzip压缩
		  if(process.env.NODE_ENV==='production'){
			  return{
				  plugins:[new CompressionPlugin({
					  test:/\.js$|\.html$|\.css/,
					  threshold:10240,
					  deleteOriginalAssets:false
				  })
					  
				  ]
			  }
		  }
	  },

配置Nginx，在 http中配置如下代码，

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;

}