hello,咱又见了~~嘻嘻。本次主要来说说这个打包优化的问题。一个vue项目从开发到上线必须得经历打包过程，一个项目的打包优化与否都决定了你这个项目的运行速度以及用户体验。本次主要是针对vue.config,js的配置进行优化。项目地址
开发环境与生产环境
开发环境与生产环境的配置也是开发中的必不可少的一环。本项目是由vue-cli3开发，vue-cli3深度集成了webpack,如果不熟悉vue-cli3可以先去官网看看相关配置。
开发环境
在项目根目录下新建.env.development文件表明是开发环境。
VUE_APP_CURRENTMODE ="development" //当前的环境 VUE_APP_LOGOUT_URL="http://localhost:3000/" //开发环境的地址
生产环境
在项目根目录下新建.env.production文件表明是生产环境。
VUE_APP_CURRENTMODE ="development" //当前的环境 VUE_APP_LOGOUT_URL="xxx" //生产环境的地址
当然你也可以自己创建一个测试环境.env.test,同样可以像上边一样配置。
环境运用
那么接下来我们怎么用它呢？这里不得不说一下的是package.json里面的两个命令serve,build,其实对应的是全命令是vue-cli-service serve --mode development,vue-cli-service build --mode production,如果你想要在构建命令中使用开发环境变量，那么可以加入
"dev-build": "vue-cli-service build --mode development"
接下来在vue.config.js运用它。
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; });
这里有必要说下，这段代码是写在chainWebpack配置项下面。这段代码其实运用了两个webpack插件webpack-chain允许配置链式操作，以及webpack.DefinePlugin。
webpack-chain：尝试通过提供可链式或顺流式的 API 创建和修改webpack 配置。了解更多
webpack.DefinePlugin：它的作用是定义全局常量，是常量。即在模块用它定义的全局常量，那么你就不能改变它。也就是说我定义了一个process.env.VUE_APP_LOGOUT_URL常量，在src文件夹下面都可以使用。了解更多
分包（code splitting）
首先思考，我们引入的第三方包与我们的业务代码一起打包会产生什么问题？
顾名思义，我们的业务代码变动比较频繁,而我们引入的第三方包基本上不会变动。浏览器会有缓存，没有变动的文件会直接从缓存中读取，这也间接的优化了网站的访问速速。
接下来配置vue.config.js,
分割第三方库
//代码分割 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 } } })
分割共用文件
组件是vue项目的重要组成部分。相当一部分组件都可以公用，在不同的文件中引入，因此我们可以将这部分公用的组件直接分割出来。
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/components'), minSize: 0, //表示在压缩前的最小模块大小,默认值是 30kb minChunks: 2, // 最小公用次数 priority: 5, // 优先级 reuseExistingChunk: true // 公共模块必开启 }, //其余的第三方包打进vendor vendors: { test: /[\\/]node_modules[\\/]/, priority: -10 } } })
打包完后会发现dist/static/js,多了一个vueEditor和public文件，这就表明分割完成。
map文件处理和别名设置(alias)
map文件
我们可以进一步优化，打包默认生成map文件,从而导致包的体积过大，这时我们需要设定一个属性来关闭它。
productionSourceMap: false
别名设置
alias运用的好处在于不用一级级的去找，而是直接锁定位置，从而减少文件搜索时间。
//设置别名 config.resolve.alias .set('@', resolve('src')) .set('@api', resolve('src/api/api'))//接口地址 .set('@assets', resolve('src/assets'))
gzip压缩与去console插件
如果上面的方式都编写了，文件依旧过大，这个时候不得不考虑代码压缩和去掉console插件了，可以说为了优化项目，“无所不用其极”。
gzip压缩
首先安装开始安装
cnpm install compression-webpack-plugin --save-dev
然后在configureWebpack里面配置它