vue-cli3 cdn方式引入Vue模块

文章目录

  • 选择Vue的cdn
  • 从那儿引入?
  • 是否需要删除 import Vue 语句?
  • 打包测试

选择Vue的cdn

引入的 vue 文件必须是游览器版本,最少需要包含 vue运行时源码,也就是 vue.runtime.min.js 这个文件,可以到各大cdn网站上获取。

运行时源码和完整版有什么不同?
运行时源码少了编译器,而完整版有,因为 vue-loader 编译后已经编译了 template ,所以不需要再次编译。这意味着运行时源码还要小一点,详见vue官方文档。

我使用的是 bootcdn 的运行时压缩模块,体积会更小。

从那儿引入?

使用 vue-cli3 构建的项目,可以在 项目/public/index.html 的 head 元素中引入相关的 cdn 。
我的代码如下:

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
    <title>vue-apptitle>
    <script
      src="https://cdn.bootcss.com/vue/2.6.10/vue.runtime.min.js"
      crossorigin="anonymous"
    >script>
    <script
      src="https://cdn.bootcss.com/vue-router/3.1.3/vue-router.min.js"
      crossorigin="anonymous"
    >script>
  head>

我在 script 元素中设置了 crossorigin 属性,避免跨域的警告,详见 CORS settings attributes 。
在这个项目中 vuevue-router 都使用 cdn 来引入了,减少了很多体积。

是否需要删除 import Vue 语句?

不用删除,但是要配置不打包 cdn 引入的模块,需要在 webpack 中设置不打包 vue 等使用 cdn 引入的模块。
当然也可以删除,但是不建议。如果你安装项目的时候使用了 eslint 这样的语法编辑器,就会直接报错,类似 Vue undefined 这样,可以用 window.Vue 来调用,不建议,因为这会丢失语法提醒。若是安装了 typescript 那么还要写额外的全局类型等,所以不建议删除。

如何在打包时忽略已经用 cdn 引入的模块?
vue.config.js 文件中添加如下设置:

module.exports = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
      'vue-router': 'VueRouter'
    }
  }
}

属性名是引入的模块名,值是需要替换的变量,这个值必须和 cdn 中提供的一样,其作用是不打包使用外部引入的扩展,也就是 build 的时候不打包这也模块。详见 webpack 外部扩展。

注意:源代码只是改了 “项目/public/index.html” 文件和配置了 vue.config.js,没有修改其他代码。

打包测试

不使用 cdn 的情况打包的 dist 文件夹(注释掉 vue.config.js 添加的代码就可测试):

$ vue-cli-service build

  dist\js\chunk-vendors.c79ff8b4.js       114.63 KiB        40.43 KiB
  dist\js\app.dfdf8bae.js                 4.71 KiB          2.07 KiB
  dist\js\chunk-7a70a114.6f60ed21.js      0.55 KiB          0.37 KiB
  dist\css\app.7fe16c18.css               0.49 KiB          0.25 KiB
  dist\css\chunk-7a70a114.98f4dffc.css    0.28 KiB          0.17 KiB

其中 venders 有114KB,包含了 webpack + vue + vur-router。

使用 cdn 的情况打包的 dist 文件夹:

yarn run v1.17.3
 DONE  Compiled successfully in 6367ms
  File                                    Size              Gzipped

  dist\js\chunk-vendors.7876bfa1.js       24.21 KiB         8.86 KiB
  dist\js\app.7fb99721.js                 4.78 KiB          2.10 KiB
  dist\js\chunk-7a70a114.759e91f3.js      0.55 KiB          0.38 KiB
  dist\css\app.7fe16c18.css               0.49 KiB          0.25 KiB
  dist\css\chunk-7a70a114.98f4dffc.css    0.28 KiB          0.17 KiB

此时 venders 只有24KB,只有 webpack 的相关代码了。

总结:
114-24=90,对于小型网站来说,还是不错的小优化。用此方法还可以引入其他模块,比如 moment.jsvuexiViewelement-ui 等等。

另外,如果想继续优化打包,建议了解异步路由,异步加载等,谨慎使用 require.context

你可能感兴趣的:(vue,随记)