vue项目打包上线优化与部署

vue项目打包上线优化与部署—踩坑

网上有很多优化手段，部分报错部分有效，所用脚手架不同配置也不同，所以我在此对做一个踩坑以后的部署总结

用到的优化手段包括：
1.按需加载 //打包体积减少比较多
2.压缩文件 //打包体积减少很多很多
3.去除console 打包体积减少一点点
3.使用预加载 //第一次加载速度大幅度加快 原来要十几秒使用以后只要不到三秒
3.1：路由懒加载
3.2：配置chainWebpack

优化打包需要安装:
npm install compression-webpack-plugin@5.00 --save
npm install uglifyjs-webpack-plugin --save
npm install babel-plugin-component --save

vue.config文件部署

const path = require('path')
const webpack = require('webpack')
const CompressionWebpackPlugin = require('compression-webpack-plugin')
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const productionGZipExtensions = ['js', 'css', 'woff', 'ttf', 'eot', 'svg'];  //所需要压缩的文件类型

module.exports = {
  //不会生成map文件
  productionSourceMap: false,
  //配置代码块
  devServer: {
    //路径代理
    proxy: {
      '/xxx/': { //访问路径，可以自己设置，
        target: 'http://xxxxxxxxx:xxxx', //代理接口，即后端运行所在的端口
        changeOrigin: true, //设置是否跨域
        ws: true,
        pathRewrite: { //访问路径重写
          '^/xxx/': '/xxx/'
        },
      },
    }
  },
  configureWebpack: {
    //去除console配置
    optimization: {
      minimizer: [
        new UglifyJsPlugin({
          uglifyOptions: {
            warnings: false,
            compress: {
              pure_funcs: ['console.log', 'console.debug']//移除console
            }
          }
        })
      ]
    },
    //按需引入以后，打包的时候去除全局依赖
    externals: {
      'element-ui': 'ELEMENT',   
      'echarts': 'echarts',
    },
    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,  //大于10kb文件就压缩
        minRatio: 0.8     //压缩率
      }),
    ]
  },
  chainWebpack(config) {
    // 打开预加载,它可以提高第一个屏幕的速度
    config.plugin('preload').tap(() => [
      {
        rel: 'preload',
        fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
        include: 'initial'
      }
    ])
    // when there are many pages, it will cause too many meaningless requests
    config.plugins.delete('prefetch')
  },
}

babel.config文件部署

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    [
      "component",
      {
        libraryName: "element-ui",
        styleLibraryName: "theme-chalk"
      }
    ]
  ]
}

main.js文件部署

import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css';
import {
  Pagination,
  Dialog,
  Collapse,
  CollapseItem,
  DatePicker,
  Dropdown,
  DropdownMenu,
  DropdownItem,
  Submenu,
  RadioGroup,
  Radio,
  TimeSelect,
  Input,
  Row,
  Col,
  Switch,
  InputNumber,
  Checkbox,
  CheckboxButton,
  CheckboxGroup,
  Menu,
  MenuItem,
  Slider,
  MenuItemGroup,
  Select,
  Popover,
  Option,
  OptionGroup,
  Button,
  Table,
  TableColumn,
  Form,
  FormItem,
  Tabs,
  TabPane,
  Progress,
  Loading,
  MessageBox,
  Message,
  Notification,
  Cascader
} from 'element-ui'
Vue.use(Option)
Vue.use(OptionGroup)
Vue.use(Popover)
Vue.use(Pagination)
Vue.use(Slider)
Vue.use(DatePicker)
Vue.use(TimeSelect)
Vue.use(Dialog)
Vue.use(RadioGroup)
Vue.use(Radio)
Vue.use(Dropdown)
Vue.use(DropdownMenu)
Vue.use(DropdownItem)
Vue.use(Submenu)
Vue.use(Input)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(InputNumber)
Vue.use(Checkbox)
Vue.use(CheckboxButton)
Vue.use(CheckboxGroup)
Vue.use(Select)
Vue.use(Button)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Tabs)
Vue.use(TabPane)
Vue.use(Progress)
Vue.use(Menu)
Vue.use(MenuItem)
Vue.use(MenuItemGroup)
Vue.use(Row)
Vue.use(Col)
Vue.use(Switch)
Vue.use(Cascader)
Vue.use(Loading.directive)
Vue.prototype.$loading = Loading.service
Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message
Vue.config.productionTip = false
import App from './App.vue'
import store from './store'
import router from './router'
import i18n from './common/i18n/i18n'
import axios from './api/axios'
import BaiduMap from 'vue-baidu-map'
Vue.prototype.$axios = axios
Vue.use(BaiduMap, {
  ak: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' // 百度地图API官网中获取的ak值
});
import plugin from "@/utils/plugin";
import '@/utils/v-dialogDrag';

Vue.use(plugin)
new Vue({
  render: h => h(App),
  i18n,
  store,
  router,
}).$mount('#app')