webpack-cdn打包优化技术

最新推荐文章于 2024-08-16 07:50:01 发布

心宽路阔走天下

最新推荐文章于 2024-08-16 07:50:01 发布

阅读量547

点赞数

分类专栏： vue 文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_42471170/article/details/113307526

版权

vue 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

1. vue.config.js配置cdn

const isProd = process.env.NODE_ENV === 'production'
//样式和JavaScript脚本的第三方cdn连接
const cdn = {
  css: ['https://cdn.jsdelivr.net/npm/element-ui@2.15.0/lib/theme-chalk/index.css'],
  js: [
    'https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js',
    'https://cdn.jsdelivr.net/npm/vue-router@3.5.1/dist/vue-router.min.js',
    'https://cdn.jsdelivr.net/npm/vuex@3.6.2/dist/vuex.min.js',
    'https://cdn.jsdelivr.net/npm/axios@0.21.1/dist/axios.min.js',
    'https://cdn.jsdelivr.net/npm/element-ui@2.15.0/lib/index.js'
  ]
}
//外部引入的对象与内部引用时的对象配置
//例如：{vue: 'Vue'}，vue为内部import 'vue'的vue对象，Vue为外部引入后的对应的全局变量。
const externals = {
  vue: 'Vue',
  'vue-router': 'VueRouter',
  vuex: 'Vuex',
  axios: 'axios',
  'element-ui': 'ELEMENT'
}

module.exports = {
  configureWebpack: {
  //外部扩展的配置，告诉webpack,在production模式下，才引入外部的cdn资源，并且不要把对应的模块打包到vender的公共包里面
    externals: isProd ? externals : {}
  },
  chainWebpack: webpackConfig => {
    if (isProd) {
      webpackConfig.plugin('html').tap(args => {
        args[0].cdn = cdn
        return args
      })
    }

  },
  devServer: {
    open: true,
    host: '0.0.0.0',
    port: 8081
  }
}

2 index.html文件的相应配置

<!DOCTYPE html>
<html lang="">
<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><%= htmlWebpackPlugin.options.title %></title>
    <% for(var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css){ %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" ref="preload"/>
    <% } %>
</head>
<body>
<noscript>
    <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
        Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
<% for(var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js){ %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" ref="preload"></script>
<% } %>
</body>

</html>

2.1引入cdn的css

  <% for(var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css){ %>
    <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" ref="preload"/>
    <% } %>

2.2 引入cdn的js

<% for(var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.js){ %>
<script type="text/javascript" src="<%= htmlWebpackPlugin.options.cdn.js[i] %>" ref="preload"></script>
<% } %>

如果对您有帮助，请点个赞，谢谢。