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']
},
}
2021下半年的展望
- 将项目换成vite
- 努力发文
- 为提桶做准备
