2021上半年阶段总结，努力终会得到回报的

在2021上半年我的掘金终于升级了。。

其实加入掘金挺早的，只是之前，只是在掘金里摸摸鱼，看下沸点，看下技术文章而已，基本没有发表任何自己的一些心得，有幸参加了掘金 2021 春招闯关活动和 6月更文挑战｜这一次，豪华大礼助你扶稳Flag！才积累了一些点赞量和阅读量
主要是刷一波算法题，还有项目中常用的js函数

工作中

在iview的基础上，打造的公司自己的ui框架ppui，并在pc端项目上使用
优化项目
- 打包优化
修改vue.config.js配置，利用splitChunks将不同的包拆分如：

  chainWebpack: config => {
    /*   types.forEach(type => addStyleResource(config.module.rule('less').oneOf(type))),*/
    if(ispro){
      //dll插入 开发环境不引入
      dllReference(config)
      // 移除 prefetch 插件
      config.plugins.delete('preload-activityH5')
      config.plugins.delete('prefetch-activityH5')
      // config.plugins.delete('prefetch-index')
      // config.plugins.delete('preload-index')
      // // 移除 preload 插件
      config.optimization.minimize(true);

      config.optimization.splitChunks({
        cacheGroups: {
          common: {
            name: "chunk-common",
              chunks: "initial",//静态  动态 全部
              minChunks: 2,
              maxInitialRequests: 5,
              minSize: 0,
              priority: -10,
              reuseExistingChunk: true,//组件缓存
              enforce: true
          },
          // 抽离node_modules下的库为一个chunk
          vendors: {
            name: "chunk-vendors",
              test: /[\\/]node_modules[\\/]/,
              chunks: "initial",
              priority: -20,
              reuseExistingChunk: true,
              enforce: true
          },
          // 由于Index入口使用了iview,所以讲iview单独处理出来，这样admin入口就不会使用此js
          ppui: {
            name: "chunk-ppui",
              test: /[\\/]node_modules[\\/]ppui[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          //
          evant: {
            name: "chunk-evant",
              test: /[\\/]node_modules[\\/]evant[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          // 由于admin入口使用了echarts,所以讲echarts单独处理出来，这样index入口就不会使用此js
          // echarts: {
          //   name: "chunk-echarts",
          //   test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
          //   chunks: "all",
          //   priority: 4,
          //   reuseExistingChunk: true,
          //   enforce: true
          // },
          // // 由于echarts使用了zrender库，那么需要将其抽离出来，这样就不会放在公共的chunk中
          // zrender: {
          //   name: "zrender",
          //   test: /[\\/]node_modules[\\/]zrender[\\/]/,
          //   chunks: "all",
          //   priority: 3,
          //   reuseExistingChunk: true,
          //   enforce: true
          // },
          // 由于echarts使用了zrender库，那么需要将其抽离出来，这样就不会放在公共的chunk中
          vuePlyr: {
            name: "chunk-vuePlyr",
              test: /[\\/]node_modules[\\/]vue-plyr[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          vconsole: {
            name: "chunk-vconsole",
              test: /[\\/]node_modules[\\/]vconsole[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          vueCoreVideoPlayer: {
            name: "chunk-vue-core-video-player",
              test: /[\\/]node_modules[\\/]vue-core-video-player[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          vuedraggable: {
            name: "chunk-vuedraggable",
              test: /[\\/]node_modules[\\/]vuedraggable[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          vueAwesomeSwiper: {
            name: "chunk-vue-awesome-swiper",
              test: /[\\/]node_modules[\\/]vue-awesome-swiper[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          swiper: {
            name: "chunk-swiper",
              test: /[\\/]node_modules[\\/]swiper[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },
          cryptoJs: {
            name: "chunk-cryptoJs",
              test: /[\\/]node_modules[\\/]crypto-js[\\/]/,
              chunks: "all",
              priority: 3,
              reuseExistingChunk: true,
              enforce: true
          },



        }
      })

      // config
      //   .plugin('webpack-bundle-analyzer')
      //   .use(BundleAnalyzerPlugin)
      //   .init(Plugin => new Plugin());
    }
    // 修复HMR
    // config.resolve.symlinks(true);
    config.resolve.alias
      .set('@', resolve('src')) // key,value自行定义，比如.set('@@', resolve('src/components'))
      .set('_c', resolve('src/components'))
      .set('_u', resolve('src/utils'))
      .set('_icons', resolve('src/assets/icons'))
      .set('_images', resolve('src/assets/images'))
      .set('_a', resolve('src/api'))
      .set('_api', resolve('src/api'))
      .set('_libs', resolve('src/libs'))
      //.set('iview',resolve(path.resolve(process.cwd(), 'node_modules', 'ppui')))
      .set('@tipsImg', resolve('src/assets/images/tipsImg'));
  },
复制代码

拆分多页，后台生成的活动页之前是包含在后台管理系统里面的，后面，拆分为多页的模式

const pages = {
  activityH5: {
    entry: 'src/pages/activityH5/index.js',
    template: 'src/pages/activityH5/mobile.html',
    filename: 'mobile.html',
    // title: 'Index Page',
    // chunks: ['chunk-vendors', 'chunk-common','activityH5']
  },
  index: {
    entry: 'src/main.js',
    template: 'public/index.html',
    filename: 'index.html',
    // title: 'Index Page',
    // chunks: ['chunk-vendors', 'chunk-common','index']
  },

}
复制代码