vuecli3+生产环境使用cdn

最新推荐文章于 2023-02-15 20:14:32 发布

Vincentzyc

最新推荐文章于 2023-02-15 20:14:32 发布

阅读量3.5k

点赞数 2

分类专栏： vue javascript 文章标签： vuecli3 cdn 打包优化减少打包体积

本文链接：https://blog.csdn.net/zzzyyc/article/details/89084705

版权

javascript 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

vue

13 篇文章 1 订阅

订阅专栏

生产环境使用cdn，开发环境使用本地node_modules

<body>
    <div id="app"></div>
    <% if (process.env.NODE_ENV === 'production') { %>
	<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue-router@3.4.8/dist/vue-router.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.12.0/dist/sortable.umd.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vuedraggable/dist/vuedraggable.umd.min.js"></script>
    <% } %>
</body>

在vue.config.js中添加

  configureWebpack: {
    // 以下库使用cdn，不会被打包
    externals: process.env.NODE_ENV === 'production' ? {
      "vue": "Vue",
      "vue-router": 'VueRouter',
      "vuex": "Vuex",
      "quill": "Quill",
      "vue-quill-editor": "VueQuillEditor",
      "vuedraggable": "vuedraggable"
    } : {}
  }

externals 配置中，左边 “vue-router” 表示引入的模块名称，右边的 VueRouter 表示cdn中 vue-router 的全局实例变量（即可以被引入的变量名称，可以查看cdn源码发现）。

完成上面步骤，使用 npm run build 命令后 vue-router 模块就不会被打包。可以发现打包后的文件大小会小很多。

注意：如果vue源码也使用cdn的话，Vue.js devtools插件无效

还可以使用下面的写法：

index.html

<body>
    <div id="app"></div>
     <% if (process.env.NODE_ENV === 'production') { %>
      <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        <link rel="stylesheet" href="<%=css%>" as="style">
      <% } %>
      <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
        <script src="<%=js%>"></script>
      <% } %>
    <% } %>
</body>

在vue.config.js中添加

  chainWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      var externals = {
		"vue": "Vue",
        "vue-router": 'VueRouter',
        "vuex": "Vuex",
        "quill": "Quill",
        "vue-quill-editor": "VueQuillEditor",
        "vuedraggable": "vuedraggable",
        "element-ui": "ELEMENT"
      }
      config.externals(externals)
      const cdn = {
        css: [
          'https://cdn.jsdelivr.net/npm/element-ui@2.15.5/packages/theme-chalk/lib/index.css'
        ],
        js: [
          'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js',
          'https://cdn.jsdelivr.net/npm/vuex@3.5.1/dist/vuex.min.js'
          'https://cdn.jsdelivr.net/npm/vue-router@3.4.8/dist/vue-router.min.js',
          'https://cdn.jsdelivr.net/npm/quill@1.3.7/dist/quill.min.js',
          'https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.min.js',
          'https://cdn.jsdelivr.net/npm/sortablejs@1.12.0/dist/sortable.umd.min.js',
          'https://cdn.jsdelivr.net/npm/vuedraggable/dist/vuedraggable.umd.min.js',
          'https://cdn.jsdelivr.net/npm/element-ui@2.15.5/lib/index.js'
        ]
      }
      // 通过 html-webpack-plugin 将 cdn 注入到 index.html 之中
      config.plugin('html')
        .tap(args => {
          args[0].cdn = cdn
          return args
        })
    }
  }

Vincentzyc

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
vuecli3+生产环境使用cdn

以使用v-charts为例在vue.config.js中添加 configureWebpack: { // 把webpack的配置写在这里会自动合并 // 以下库使用cdn，不会被打包 externals: { "v-charts": "VeIndex", } },externals 配置中，左边 “v-charts” 表示引入的模块名称，右边的 VeIndex...
复制链接

扫一扫