vue.config.js 学习记录
Vue-cli4 将webpack 深度集成,不对外展示webpack 具体配置,在vue.config.js 中可以更改配置:
Vue.config.js 的基本内容为:
module.exports = {
publicPath: '/smart-dispatch-h5/', // 项目根路径
outputDir: 'dist', // 生产环境构建文件的目录
assetsDir: 'static', // outputDir 的静态资源 (js、css、img、fonts) 目录
lintOnSave: !IS_PROD,
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
devServer: { // 本地开发相关配置
port: 9020, // 端口
open: false, // 启动后打开浏览器
overlay: { // 当出现编译器错误或警告时,在浏览器中显示全屏覆盖层
warnings: false,
errors: false },
proxy: { '/proxy1/adm/': {
target: 'http://192.168.0.xx:xxxx/',
changeOrigin: true },
}
},
css: {}, // 如果 configureWebpack 是一个对象,则会通过 webpack-merge 合并到最终的配置中。
// 如果这个值是一个函数,则会接收被解析的配置作为参数。该函数既可以修改配置并不返回任何东西,也可以返回一个被克隆或合并过的配置版本。
configureWebpack: {}, // chainWebpack是一个函数,会接收一个基于 webpack-chain 的 ChainableConfig 实例。允许对内部的 webpack 配置进行更细粒度的修改。
chainWebpack: {}
}
①** productionSourceMap:设置生产环境的 source map 开启与关闭。**
Type: boolean
Default: true
什么是 source map?
source map 直译过来就是资源地图。所以,source map的作用就是定位。source map定位的时浏览器控制台输出语句在项目文件的位置。
可以看出,开启productionSourceMap后,浏览器控制台明确的告诉我们test这条结果的输出语句在main.js的20行。这就是source map的作用,对于开发人员差错时非常有用的。
② prefetching:webpack4.6.0以上支持prefetching 特性
prefetch 是一种 resource hint,用来告诉浏览器在页面加载完成后,利用空闲时间提前获取用户未来可能会访问的内容。这样子,岂不是和路由懒加载的理念冲突了吗?
那就把prefetch给关了吧:
// vue.config.js
module.exports = {
chainWebpack: config => { // 移除 prefetch 插件
config.plugins.delete('prefetch') // 移除 preload 插件
config.plugins.delete('preload')
}
}
③ ****preloading:webpack4.6.0以上支持preloading 特性
preloading是一种 resource hint,用来指定页面加载后很快会被用到的资源,所以在页面加载的过程中,我们希望在浏览器开始主体渲染之前尽早 preload。
错误的使用webpackPreload实际上会影响性能,因此要谨慎使用。
如果把一个体积巨大的资源放在最高优先级加载,页面可能会长时间空白,用户体验体验非常差,因此,谨慎使用。
总结:
懒加载优化了首屏加载的速率
prefetch预加载优化了子页面加载的速率
④preserveWhitespace 是 compilerOptions对象中的属性之一。如果设置为false,标签之间的空白将会忽略,这可能会导致性能稍好,但可能会影响嵌入式元素的布局。true表示编译的渲染函数将会保留HTML标记之间的所有空白字符。
如何使用?
在vue.config.js文件中添加如下代码:
// set preserveWhitespace config.module
.rule('vue')
.use('vue-loader')
.loader('vue-loader')
.tap(options => {
options.compilerOptions.preserveWhitespace = true
return options
})
.end()
⑤ runtimeChunk
根据路由驱动页面的 runtime 代码默认情况是包含在 build 后的 app.hash.js 内的,如果我们改动其他路由,就会导致 runtime 代码改变。从而不光我们改动的路由对应的页面 js 会变,含 runtime 代码的 app.hash.js 也会变,对用户体验是非常不友好的。
为了解决这个问题要设定 runtime 代码单独抽取打包。
** script-ext-html-webpack-plugin**
但是 runtime 代码由于只是驱动不同路由页面的关系,代码量比较少,请求 js 的时间都大于执行时间了,所以使用 script-ext-html-webpack-plugin 插件将其内链在 index.html 中比较友好。所有这两个一般配合使用。
chainWebpack:
config
.plugin('ScriptExtHtmlWebpackPlugin')
.after('html')
.use('script-ext-html-webpack-plugin', [
{
// `runtime` must same as runtimeChunk name. default is `runtime`
inline: /runtime\..*\.js$/ }
])
.end()
config.optimization.runtimeChunk('single')
⑥** splitChunks**
如果使用了某些长期不会改变的库,像 element-ui ,打包完成有 600 多 KB ,包含在默认 vendor 中显然不合适,每次用户都要加载这么大的文件体验不好,所以要单独打包:
config.optimization.splitChunks({
chunks: 'all',
cacheGroups: { // cacheGroups 下可以可以配置多个组,每个组根据 test 设置条件,符合 test 条件的模块
commons: {
name: 'chunk-commons',
test: resolve('src/components'),
minChunks: 3, // 被至少用三次以上打包分离
priority: 5, // 优先级
reuseExistingChunk: true // 表示是否使用已有的 chunk,如果为 true 则表示如果当前的 chunk 包含的模块已经被抽取出去了,那么将不会重新生成新的。
},
node_vendors: {
name: 'chunk-libs',
chunks: 'initial', // 只打包初始时依赖的第三方
test: /[\\/]node_modules[\\/]/,
priority: 10 },
vantUI: {
name: 'chunk-vantUI', // 单独将 vantUI 拆包
priority: 20, // 数字大权重到,满足多个 cacheGroups 的条件时候分到权重高的
test: /[\\/]node_modules[\\/]_?vant(.*)/ }
}
})
⑦ 配置多个代理的注意点
在Vue项目的开发过程中,为了本地调试方便,我们通常会在 vue.config.js 中配置 devServer 来在本地启动一个服务器,在这个选项中,我们会配置proxy 属性来将指向到本地的请求(例如: /api/action) 代理到后端的开发服务器上(例如: http://xxx.xxx.xxx/api/action)
在这个配置中,要注意以下两点:
接口地址有重叠地址时,将匹配度低的放在后面。
例如:
-
将 / 匹配到 192.191.1.1;
-
将 /api 匹配到 192.191.1.2
-
将 /api/action 匹配到 192.191.1.3
如果我们像下面一样书写:
那么所有到/, /api和 /api/action 的请求将全部被代理到 192.191.1.1 上面去。
原因是这里的匹配实际上是一个正则匹配的过程,当我们请求 /api 时,首先读取到了配置项中的第一个,拿配置中的 / 去匹配请求中的 /api , 发现请求的/api 中包含配置项/, 匹配成功,直接将请求代理到了 192.191.1.1 上面去, 对/api/action的匹配也同理。
也就是说,它的匹配规则是: 拿配置项中的地址去匹配请求中的地址,如果请求中的地址中包含配置中的地址,则匹配成功,否则,拿下一个配置项继续匹配。
所以,配置中的地址与请求地址中匹配的字符越少,匹配度越低。 上例中配置中的地址(/)与请求地址(/api)只有一个字符是匹配的,所以匹配度低。
所以我们正确的写法应该是:
** 2. 环境配置**
.env.production 线上环境打包 // vue-cli-service serve
.env.test 测试环境打包 // vue-cli-service test:unit
.env.development 开发环境打包 // vue-cli-service build 和 vue-cli-service test:e2eo
.emv.staging 使用mode 打包 -- vue-cli-service -- mode staging
.env.local. 本地环境变量,会被 git 忽略上传