vue-cli3.0 性能优化 及入坑记录

1.使用缓存 转摘文章
优化项目其中占大部分的有 eslint-loader和vue-loader 如果项目文件过多是 项目启动eslint检查和加载耗时过长 导致启动时间动不动就几分钟
解决问题的方式有 干掉eslint，简单粗暴 这不是一种友好的解决方案所以考虑的最多的是进行缓存
这就不得不说到到plugins 中的 hard-source-webpack-plugin 这插件为模块提供中间缓存步骤,使用缓存的时候 也往往意味了可能会出现缓存问题，适当做些预防 非友好的缓存带来的不良体验
（1）不使用hard-source-webpack-plugin 使用vue-cli自带的配置

chainWebpack: (config) => {
  config.cache(true)
}

（2）使用hard-source-webpack-plugin

npm i hard-source-webpack-plugin -D

chainWebpack: (config) => {
  config.plugin('cache').use(HardSourceWebpackPlugin)
}

添加打包性能分析 webpack-bundle-analyzer

1.在项目下载webpack-bundle-analyzer包

npm install webpack-bundle-analyzer --save-dev

2.在vue.config.js中

const BundleAnalyzerPlugin =require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
module.exports = {
	chainWebpack:config=>{
		if(process.env.my_use_analyzer){
			config
                .plugin('webpack-bundle-analyzer')
                .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin)
		}
	}
}

3.在package.json添加专属脚本

"scripts": {
    "analyze": "set my_use_analyzer=true && vue-cli-service serve"
},

运行npm run analyze就行

analyze 会默认开启8888端口 如果被占用的话 会报错

安装webpack-bundle-analyzer遇到的问题

Can‘t import the named export ‘XXXXXX‘ from non EcmaScript module (only default export is available)

这时候需要配置vue.config.js的configureWebpack-》module

module.exports = {
	configureWebpack: {
		module: {
			rules: [
				{
				test: /\.mjs$/,
				include: /node_modules/,
				type: "javascript/auto"
				}
			]
		}
	}
}

性能优化之 splitchunks

module.exports = {
	chainWebpack: config => {
	// 公共代码抽离
	config.optimization = {
	splitChunks: {
	cacheGroups: {
		vendor: {
			chunks: 'all',// “initial”（初始化） | “all”(默认就是 all) | “async”（动态加载）,需要配置初始加载的代码也加入到代码分割中，可以设置为 ‘all’
			test: /node_modules/,
			name: 'vendor',  //打包的 chunks 的名字
			minChunks: 1,	//（默认是1）在分割之前，这个代码块最小应该被引用的次数
			maxInitialRequests: 5,// （默认是3）一个入口最大的并行请求数
			minSize: 0, //（默认是30000）形成一个新代码块最小的体积
			priority: 100 //缓存组打包的先后优先级，数值大的优先
		}
	}}}}
}

结合webpack-bundle-analyzer 可以看出自己modules打包的时候那个包占比较大 可以单独把他拎出来，形成一个独立的公共文件 也可以使用cdn的形式

module.exports = {
	chainWebpack: config => {
		chunks: 'all',
        cacheGroups: {
			vendors: {
				name: 'chunk-vendors',
				test: /[\\/]node_modules[\\/]/,
				chunks: 'initial',
				priority: 2,
				reuseExistingChunk: true,
				enforce: true
			},
			core: {
				name: 'chunk-vendors-core',
				test: /[\\/]node_modules[\\/]core-js[\\/]/,
				chunks: 'initial',
				priority: 2,
				reuseExistingChunk: true,
				enforce: true
			},
		}
	}
}

打包结果

或者

module.exports = {
	chainWebpack: config => {
		config.optimization.splitChunks({
            chunks: 'all',
            maxInitialRequests: Infinity,
            minSize: 300000, // 依赖包超过300000bit将被单独打包
            automaticNameDelimiter:'-',
            cacheGroups: {
                vendor: {
                    test: /[\\/]node_modules[\\/]/,
                    name(module) {
                    const packageName = module.context.match(/[\\/]node_modules[\\/](.*?)([\\/]|$)/)[1];
                    return `chunk.${packageName.replace('@', '')}`;
                    },
                    priority:10
                },
            }
        })
	}
}

打包结果

从两次打包结果来看包的体积相差不大，第一种更加具有正对性，第二种更简洁具有普遍性
注意：如果引入的包较大的话 建议使用cdn 可参考vuecli3.0日常优化 ;包在0-0.3使用splitchunks没有太大问题
如果当你使用ui框架时 使用splitchunks将ui框架进行单独打包项目初期可以，随着项目的不断迭代，会出现包越来越大的现象

Vue.js 报错 error 'process' is not defined no-undef

打开.eslintrc.js,在globals中添加"process": true：

"globals": {
	"Atomics": "readonly",
	"SharedArrayBuffer": "readonly",
	"process": true
},

重启项目即可