阅读 95

Vue 项目之 Webpack 打包 Vue 代码(5)

「这是我参与11月更文挑战的第23天,活动详情查看:2021最后一次更文挑战

1. 全局特性标志(global feature flags)的配置

前面我们还有一个浏览器中的警告没有解决:

image-20211123200514332

这个警告的大意是:“特性标志 __VUE_OPTIONS_API____VUE_PROD_DEVTOOLS__ 没有被明确定义。你正在运行 vueesm-bundler 构建版本的代码,它期望这些编译时特性标志通过构建工具的配置被全局注入,以便在生产构建中获得更好的摇树效果。更多详情,可以查看链接: link.vuejs.org/feature-fla… ”。

我们可以点击这个链接地址,查看详情:

image-20211123205147043

可以看到,vue3.0.0-rc.3 版本开始,esm-bundler 构建(我们当前项目中使用的就是这个构建版本的 vue 源码:import { createApp } from 'vue/dist/vue.esm-bundler';)现在暴露了可以在编译时重写的全局特性标志(global feature flags):

  • __VUE_OPTIONS_API__:这个标志是用来对 Vue2 做适配的(我们前面写的 templatedata 等选项其实都属于 Options API,但在 Vue3 中,这种 Options API 写得相对来说就比较少了,我们现在一般在 Vue3 中编写 Composition APIsetup() {}),后面会讲),默认情况下,这个 __VUE_OPTIONS_API__ 标志默认值是 true,这就意味着默认情况下 Vue3 项目中会包含支持 Options API 的这部分代码。那么,如果我们在项目中编写的都是 Composition API 代码,其实就不再需要这部分解析 Options API 的代码了,所以这里强烈建议我们对这个标志进行正确的配置,以便在最终构建时获得正确的摇树(tree-shaking,可以实现无用代码的自动删除,即如果发现某部分代码并没有被使用到,那么最终会将这部分代码删除掉,这样一来整体代码的体积会就变得更小些)效果。
  • __VUE_PROD_DEVTOOLS__:这个标志是用来设置在生产环境下要不要对 devtools(这里指的是 vue 的调试工具 Vue Devtools)做支持。通常,调试工具只在开发阶段使用,生产阶段一般是不需要的,所以我们可以将这个标志设置为 false(也是其默认值,但如果想要在生产阶段也让 Vue Devtools 工具生效,则可以设置为 true)。

所以,既然我们使用的是 vue.esm-bundler.js 这一版本的 vue,那么在 webpack 中,就需要使用 DefinePlugin 插件对这两个全局特性标志进行明确配置:

...
// 通过解构的方式拿到 webpack 内置的 DefinePlugin 插件,你也可以通过 require('webpack').DefinePlugin 直接获取到该插件
const { DefinePlugin } = require('webpack');
...

module.exports = {
  ...
  plugins: [
    ...
    new DefinePlugin({
      BASE_URL: "'./'",
      __VUE_OPTIONS_API__: true, // 这里必须是布尔值,不能写成字符串
      __VUE_PROD_DEVTOOLS__: false // 这里必须是布尔值,不能写成字符串
    }),
    ...
  ]
}
复制代码

再来打包看下效果:

image-20211123210700840

你会发现,这次就没有任何警告了。

此外,因为当前我们的项目中已经没有再使用 template 选项来编写模板内容了(我们现在是把模板内容写在了 .vue 文件中的 <template> 中,到时候在打包时会通过 vue-loader@vue/compiler-sfc 来帮我们进行解析,所以不再需要 Runtime + Compiler,只需要 Runtime)所以我们的项目中使用 Runtime-only 版本的 vue 即可,也就是说,当我们编写的都是 SFC 文件(.vue 文件)时,不需要使用 vue/dist/vue.esm-bundler,只需使用 vue 即可,所以,我们对 src/main.js 中的内容进行修改:

// 第三方库的导入可以放最上面(个人习惯)
import { createApp } from 'vue'; // 直接使用 vue 即 vue.runtime.esm-bundler.js 版本

...
复制代码

修改完后,我们重新打包,你会发现依然是没有问题的,没有再出现之前那个“组件提供了 template 选项,但在当前这个 Vue 构建版本中不支持运行时编译”的警告了。因为现在 .vue 文件中的 <template> 会交给 vue-loader 中的 @vue/compiler-sfc 来帮助我们进行解析的。

文章分类
前端
文章标签