Vue项目解决app.js和chunk-vendors.js文件过大导致响应慢

1、路由配置由原先的import更改为下面情况 因为import会一次性全部加载完 那样会影响很多

// import backPage from '../views/backPage.vue';constbackPage=resolve=>require(['../views/backPage.vue'],resolve);// import own from '../views/own.vue';constown=resolve=>require(['../views/own.vue'],resolve);// import ranking from '../views/ranking.vue'constranking=resolve=>require(['../views/ranking.vue'],resolve);// import institutions from '../views/institutions.vue'constinstitutions=resolve=>require(['../views/institutions.vue'],resolve);// import certificate from '../views/certificate.vue'constcertificate=resolve=>require(['../views/certificate.vue'],resolve);

2、在vue.config.js中进行配置

 productionSourceMap:false,

这个设置为false具体什么原因自己百度去！

3、在vue.config.js中添加下方选中的

const path=require('path');const webpack=require('webpack')const CompressionWebpackPlugin=require('compression-webpack-plugin')const productionGzipExtensions=['js','css']const isProduction= process.env.NODE_ENV==='production'

module.exports={
    devServer:{
        disableHostCheck:true},
    configureWebpack:{
        resolve:{
            alias:{'@': path.resolve(__dirname,'./src'),'@i': path.resolve(__dirname,'./src/assets'),}},
        plugins:[newwebpack.IgnorePlugin(/^\.\/locale$/,/moment$/),// 下面是下载的插件的配置newCompressionWebpackPlugin({
                algorithm:'gzip',
                test:newRegExp('\\.('+ productionGzipExtensions.join('|')+')$'),
                threshold:10240,
                minRatio:0.8}),newwebpack.optimize.LimitChunkCountPlugin({
                maxChunks:5,
                minChunkSize:100})]}}

4、然后需要在nginx中设置
找到nginx文件夹，编辑conf/nginx.conf文件

在server{}中添加下列代码
server{
	```
	
	gzip on;
    gzip_min_length 1k;
    gzip_comp_level 9;
    gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png;
    gzip_vary on;
    gzip_disable"MSIE [1-6]\.";
    
    ```}

这个还有一个地方nginx的http下方也可以开启
如果没有自己添加上就行