从0到1搭建element后台框架优化篇(打包优化)

 VUE_APP_CURRENTMODE ="development" //当前的环境
 VUE_APP_LOGOUT_URL="http://localhost:3000/" //开发环境的地址

 VUE_APP_CURRENTMODE ="development" //当前的环境
 VUE_APP_LOGOUT_URL="xxx" //生产环境的地址

"dev-build": "vue-cli-service build --mode development"

 config.plugin('define').tap(args => {
   args[0]['process.env'].VUE_APP_LOGOUT_URL = JSON.stringify(process.env.VUE_APP_LOGOUT_URL)
   console.log(args[0])
   return args;
 });

 //代码分割
 config.optimization.minimize(true);
 config.optimization.splitChunks({
  chunks: 'all',
  cacheGroup:{
  //vue2-editor单独打一个包
   vueEdior: {
   name: 'vueEdior',
   test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
   priority: 10 // 优先级要大于 vendors 不然会被打包进 vendors
   },
   //其余的第三方包打进vendor
   vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
   }
  }
 })

 config.optimization.minimize(true);
 config.optimization.splitChunks({
  chunks: 'all',
  cacheGroup:{
   vueEdior: {
   name: 'vueEdior',
   test: /[\\/]node_modules[\\/]vue2-editor[\\/]/,
   priority: 10 // 优先级要大于 vendors 不然会被打包进 vendors
   },
   public: {
   name: 'public',
   test: resolve('src/ponents'),
   minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb
   minChunks: 2, // 最小公用次数
   priority: 5, // 优先级
   reuseExistingChunk: true // 公共模块必开启
   },
   //其余的第三方包打进vendor
   vendors: {
   test: /[\\/]node_modules[\\/]/,
   priority: -10
   }
  }
 })

productionSourceMap: false

 //设置别名
 config.resolve.alias
  .set('@', resolve('src'))
  .set('@api', resolve('src/api/api'))//接口地址
  .set('@assets', resolve('src/assets'))

pm install pression-webpack-plugin --save-dev

 const CompressionWebpackPlugin = require('pression-webpack-plugin')
 new CompressionWebpackPlugin({
  filename: '[path].gz[query]',
  algorithm: 'gzip',
  test: new RegExp(
   '\\.(' +
   ['js', 'css'].join('|') +
   ')$',
  ),
  threshold: 10240,
  minRatio: 0.8,
  }),

pm install uglifyjs-webpack-plugin --save-dev

 const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
 new UglifyJsPlugin({
  uglifyOptions: {
   press: {
   warnings: false,
   drop_debugger: true,
   drop_console: true,
   },
  },
  sourceMap: false,
  parallel: true,
  }),

 //对一些不经常改动的库，可以通过cdn引入，webpack不对他们打包 
 let externals = {
  'vue': 'Vue',
  'axios': 'axios',
  'element-ui': 'ELEMENT',
  'vue-router': 'VueRouter',
  'vuex': 'Vuex',
  'echarts': 'echarts',
  'vue2-editor': 'VueEditor'
 }

 const cdn = {
  css: [
  //element-ui css
  'https://unpkg./element-ui/lib/theme-chalk/index.css'
  ],
  js: [
  //vue
  'https://unpkg./vue@2.6.10/dist/vue.min.js',
  //axios
  'http://cdn.staticfile./axios/0.19.0-beta.1/axios.min.js',
  //vuex
  'https://unpkg./vuex@3.1.0/dist/vuex.min.js',
  //vue-router
  'https://unpkg./vue-router@3.0.6/dist/vue-router.min.js',
  //element
  'https://unpkg./element-ui@2.7.2/lib/index.js',
  //echarts
  'https://cdn.jsdelivr./npm/echarts@4.2.1/dist/echarts.min.js',
  //vue2-editor
  "https://unpkg./vue2-editor@2.6.6/dist/vue2-editor.js"
  ]
 }

 process.env.VUE_APP_CURRENTMODE === 'production') {
  config.externals(externals)//忽略打包
  config.plugin('html')
  .tap(args => {
   args[0].cdn = cdn;
   return args
  })
 }

 <% if (process.env.VUE_APP_CURRENTMODE === 'production') { %>
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
  <link rel="stylesheet" href="<%=css%>" rel="external nofollow" as="style">
  <% } %>
  <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
  <% } %>
 <% } %>

pm install webpack-cdn-plugin --save

const cdnPlugin = require('webpack-cdn-plugin')

 new cdnPlugin({
  modules: [
   { name: 'vue', var: 'Vue', path: 'dist/vue.min.js' },
   { name: 'axios', var: 'axios', path: 'dist/axios.min.js' },
   { name: 'vuex', var: 'Vuex', path: 'dist/vuex.min.js' },
   { name: 'element-ui', var: 'ELEMENT', path: 'lib/index.js', style: 'lib/theme-chalk/index.css' },
   { name: 'echarts', var: 'echarts', path: 'dist/echarts.min.js' },
   { name: 'vue2-editor', var: 'VueEditor', path: 'dist/vue2-editor.js' },
   { name: 'vue-router', var: 'VueRouter', path: 'dist/vue-router.min.js' },
  ],
  publicPath: '/node_modules'
  })