【前端优化】前端项目打包后生成的文件过大优化

方法1：按需引入

例如echarts

//不可取
 import echarts from ‘echarts’
//应该这样按需引入
import echartsLine from '@/components/statistics/echartsLine';

例如element-ui

// 不可取
import ElementUI from "element-ui";
Vue.use(ElementUI);
//应该这样按需引入
import Vue from 'vue';
import {
    
    
  Pagination,
  Carousel,
  Message,
  MessageBox
} from 'element-ui';
Vue.component(Carousel.name, Carousel);
Vue.component(Pagination.name, Pagination);
Vue.use(Loading.directive);

Vue.prototype.$loading = Loading.service;
Vue.prototype.$message = Message;
Vue.prototype.$MessageBox = MessageBox;

方法2：使用插件：compression-webpack-plugin
压缩代码，现在的最新版本要求Webpack v4以上，node6以上，所以如果是vue2.x，下载的版本要降低到如下面

npm install --save-dev [email protected]

// 1安装
npm install --save-dev compression-webpack-plugin

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 = {
    
    
  lintOnSave: false,
  runtimeCompiler: true,
  publicPath: './', // 设置打包文件相对路径
  // 这是前端解决跨域的代码
  devServer: {
    
    
    // open: process.platform === 'darwin',
    // host: 'localhost',
    port: 8080,
    // open: true, //配置自动启动浏览器
    proxy: {
    
    
      '/api': {
    
    
        target: ``,//写上接口基地址
        changeOrigin: true,
        ws: true,
        // secure: false, //如果是http接口，需要配置此参数
        pathRewrite: {
    
    
          '^/api': ''
        }
      }
    }
  },
  configureWebpack:{
    
    
    resolve:{
    
    
      alias:{
    
    
        '@':path.resolve(__dirname, './src'),
        '@i':path.resolve(__dirname, './src/assets'),
      } 
    },
    plugins: [
      new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
      
      // 下面是下载的插件的配置
      new CompressionWebpackPlugin({
    
    
        algorithm: 'gzip',
        test: new RegExp('\\.(' + productionGzipExtensions.join('|') + ')$'),
        threshold: 10240,  
        minRatio: 0.8
      }),
      new webpack.optimize.LimitChunkCountPlugin({
    
    
        maxChunks: 5, 
        minChunkSize: 100
      })
    ]
  }
}

方法3 使用UglifyJsPlugin减少体积

在vue.config.js中：

const UglifyJsPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
    
    
    configureWebpack: config => {
    
    
        if (process.env.NODE_ENV === "production") {
    
    
            // 为生产环境修改配置...
            config.mode = "production";
            // 这里修改下 
            config.optimization.minimizer = [
                new UglifyJsPlugin({
    
    
                    uglifyOptions: {
    
    
                      output: {
    
     // 删除注释
			              comments: false
			            },
                        compress: {
    
    
                            warnings: false,
                            drop_console: true, //console
                            drop_debugger: true,
                            pure_funcs: ['console.log'] //移除console
                        }
                    }
                })
            ]
        } else {
    
    
            config.mode = "development";
        }
    },
    productionSourceMap: process.env.NODE_ENV === "production" ? false : true,
    css: {
    
    
        sourceMap: process.env.NODE_ENV !== "production", //生产环境不生成sourceMap
        extract: process.env.NODE_ENV === "production"
    }
}