Vue使用CDN引用项目组件,减少打包后项目体积，减小服务端压力

最新推荐文章于 2024-06-12 11:58:02 发布

功夫熊猫式浪漫style

最新推荐文章于 2024-06-12 11:58:02 发布

阅读量487

点赞数

文章标签： vue.js javascript 前端

如果是vue cli2的项目， build/webpack.base.conf.js

'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vueLoaderConfig = require('./vue-loader.conf')

function resolve(dir) {
  return path.join(__dirname, '..', dir)
}


module.exports = {
  externals:{
    'vue':'Vue',
    'element-ui':'ELEMENT',
    'vue-router':'VueRouter',
    "moment": "moment",
    "md5": "js-md5"
  },
  context: path.resolve(__dirname, '../'),
  entry: {
    app: './src/main.js'
  },
  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>Demo index html</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/theme-chalk/index.css">
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-router@3.1.3"></script>
<script src="https://cdn.jsdelivr.net/npm/js-md5@0.7.3"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.12.0/lib/index.js"></script>
</body>
</html>

以上具体方法详情可查看网址 Vue使用CDN引用项目组件，减少项目体积 - loeyo - 博客园

使用vue cli3时

vue.config.js 文件中 webpackConfig.chainWebpack

if (process.env.NODE_ENV === 'production') {
      config
        .entry('app')
        .clear()
        .add('./src/main.js')
      config.set('externals', {
        vue: 'Vue',
        'vuex': 'Vuex',
        'vue-router': 'VueRouter',
        'element-ui': 'ELEMENT',
        'lodash': '_',
        axios: 'axios',
        jquery: '$'
      })
      config.plugin('html').tap(args => {
        args[0].isProd = true
        return args
      })
    } else {
      config.plugin('html').tap(args => {
        args[0].isProd = false
        return args
      })
    }

开发环境时去除掉这么多包，然后再public/index.html文件中记得使用cdn方式引用，但是记得再development环境时，不用cdn引用，因此需要做环境的判断

<% if (htmlWebpackPlugin.options.isProd) { %>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <script src="https://cdn.bootcss.com/vue-router/3.0.2/vue-router.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/vuex/3.1.0/vuex.min.js"></script>
    <script src="https://cdn.bootcss.com/axios/0.21.1/axios.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/1.5.12/clipboard.min.js"></script>
    <script src="https://cdn.bootcss.com/element-ui/2.13.0/index.js"></script>
    <script>
      if (typeof jQuery == 'undefined') {
        document.write(unescape("%3Cscript src='./js/jquery3.6.0/jquery.min.js'%3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='./js/vue2.6.10/vue.min.js'%3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='./js/vue-router3.0.2/vue-router.min.js'%3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='./js/vuex3.1.0/vuex.min.js'%3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='./js/axios0.21.1/axios.min.js'%3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='./js/lodash4.17.21/lodash.min.js'%3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='./js/clipboard1.5.12/clipboard.min.js'%3E%3C/script%3E"));
        document.write(unescape("%3Cscript src='./js/element-ui2.13.0/index.js'%3E%3C/script%3E"));
      }
    </script>
    <% } %>

别忘记还有这个东西。

功夫熊猫式浪漫style

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue使用CDN引用项目组件,减少打包后项目体积，减小服务端压力

如果是vue cli2的项目，build/webpack.base.conf.js'use strict'const path = require('path')const utils = require('./utils')const config = require('../config')const vueLoaderConfig = require('./vue-loader.conf')function resolve(dir) { return path.join(_...
复制链接

扫一扫