VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积

最新推荐文章于 2023-03-28 15:37:58 发布

勒布朗-前端

最新推荐文章于 2023-03-28 15:37:58 发布

阅读量1.7k

点赞数 3

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

本文链接：https://blog.csdn.net/weixin_51225684/article/details/126833432

版权

vue 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

前端性能优化方案

1.在vue.config.js 里面的写入如下配置
使用externals 代码在vue.config.js里面设置打包排除项
    使用此配置项 config.plugin('html').tap(args => { isProd args[0].isProd = true return args }) 做数据的真假，对public/index.html的 cdn外链开发模式和发布模式的引入和隐藏
注意：开发模式的依赖文件全部已经下载好了，在本地，如何public/index.html 里面还有cdn 外链文件就会发生错误
发布模式为了减少自身代码量，会引入外链cdn资源
所有要对 cdn外链资源的引入和不引入做一个判断

    module.exports = {

  chainWebpack: config => {

    //发布模式

    config.when(process.env.NODE_ENV === 'production', config => {

      //entry找到默认的打包入口，调用clear则是删除默认的打包入口

      //add添加新的打包入口

      config.entry('app').clear().add('./src/main-prod.js')



      //使用插件

      config.plugin('html').tap(args => {

        //添加参数isProd

        args[0].isProd = true

        return args

      })

      //使用externals设置排除项

      config.set('externals', {

        vue: 'Vue',

        'vue-router': 'VueRouter',

        axios: 'axios',

        moment: 'moment',

        lodash: '_',

        echarts: 'echarts',

        nprogress: 'NProgress',

        'vue-quill-editor': 'VueQuillEditor',

        // ElementUI: 'ElementUI '



      })

    })

    //开发模式

    config.when(process.env.NODE_ENV === 'development', config => {

      config.entry('app').clear().add('./src/main-dev.js')

      //使用插件

      config.plugin('html').tap(args => {

        //添加参数isProd

        args[0].isProd = false

        return args

      })

    })

  }

}

2.引入排除项相关的js文件和css样式，（引入到根目录的public/index.htm添加外部cdn引入代码）
使用htmlWebpackPlugin.options.isProd 获取 vue.config.js文件里面的 isprod 数据的变量（进行开发模式和发布模式的cdn资源的引入，开发模式引入的js和css文件是本地的，发布模式引入的js和css文件是cdn外部连接的）

<!DOCTYPE html>

<html lang="en">



<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="dist/favicon.ico">

  <title><%= htmlWebpackPlugin.options.isProd ? '' : 'dev - ' %>电商后台管理系统</title>

  <% if(htmlWebpackPlugin.options.isProd){ %>

  <!-- nprogress 的样式表文件 -->

  <link rel="stylesheet" href="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.css" />

  <!-- 富文本编辑器 的样式表文件 -->

  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.core.min.css" />

  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.snow.min.css" />

  <link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.4/quill.bubble.min.css" />

  <link rel="stylesheet" href="https://cdn.bootcss.com/element-ui/2.12.0/theme-chalk/index.css" />

  <script src="https://cdn.staticfile.org/vue/2.5.22/vue.min.js"></script>

  <script src="https://cdn.staticfile.org/vue-router/3.0.1/vue-router.min.js"></script>

  <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>

  <script src="https://cdn.staticfile.org/lodash.js/4.17.11/lodash.min.js"></script>

  <script src="https://cdn.staticfile.org/echarts/4.1.0/echarts.min.js"></script>

  <script src="https://cdn.staticfile.org/nprogress/0.2.0/nprogress.min.js"></script>

  <!-- 富文本编辑器的 js 文件 -->

  <script src="https://cdn.staticfile.org/quill/1.3.4/quill.min.js"></script>

  <script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.4/dist/vue-quill-editor.js"></script>

  <!-- element-ui 的 js 文件 -->

  <script src="https://cdn.bootcss.com/element-ui/2.12.0/index.js"></script>



  <!-- // -->

  <script src="https://cdn.bootcss.com/moment.js/2.24.0/locale/af.js"></script>

  <% } %>

</head>



<body>

  <noscript>

    <strong>Web</strong>

  </noscript>

  <div id="app"></div>

</body>



</html>

3.删除掉发布模式下的mian.js 里面的相关引入的css样式，相关引入的js样式不用删除

前端性能优化方案

const isProduction = process.env.VUE_APP_MODE === 'production'

const cdn = {
  // 忽略打包的第三方库
  /**
  * externals 对象属性解析：
  * '包名' : '在项目中引入的名字'
  * 以element-ui举例 我再main.js里是以
  * import ELEMENT from 'element-ui'
  * Vue.use(ELEMENT, { size: 'small' })
  * 这样引入的，所以我的externals的属性值应该是ELEMENT
  */
  externals: {
    vue: 'Vue',
    vuex: 'Vuex',
    'vue-router': 'VueRouter',
    axios: 'axios',
    'element-ui': 'ELEMENT'
  },
  js: [
    'https://cdn.jsdelivr.net/npm/vue',
    'https://unpkg.com/vue-router/dist/vue-router.js',
    'https://cdn.bootcss.com/vuex/3.0.1/vuex.min.js',
    'https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js',
    'https://unpkg.com/element-ui@2.13.2/lib/index.js'
  ],
  css: [
    'https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css'
  ]
}

module.exports = {
	chainWebpack: (config) => {
		if (isProduction) {
	      config.plugin('html').tap((args) => {
	        args[0].cdn = cdn
	        return args
	      })
    	}
    	config.plugin('html').tap(args => { // 所有环境配置统一的title
	        args[0].title = '外部联网协议配置系统'
	        return args
      })
	}

	configureWebpack: config => {
		config.externals = cdn.externals
	}
}

在index.html里这样写

<!DOCTYPE html>
<html lang="en">
  <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">
    <link rel="stylesheet" href="./reset.css">
    <title><%= htmlWebpackPlugin.options.title %></title>
    <!-- 使用CDN的CSS文件 -->
    <% for (var i in htmlWebpackPlugin.options.cdn && htmlWebpackPlugin.options.cdn.css) { %>
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="preload" as="style">
      <link href="<%= htmlWebpackPlugin.options.cdn.css[i] %>" rel="stylesheet">
    <% } %>
  </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 src="<%= htmlWebpackPlugin.options.cdn.js[i] %>"></script>
    <% } %>
  </body>
</html>

这样就成功的配置了生产环境第三方库采用cdn引入。能有效减小打包出来的文件体积，我的从2.6MB => 1.7MB ，减少了34%

勒布朗-前端

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
VUE 通过EXTERNALS 加载外部CDN资源，减少打包体积

使用externals 代码在vue.config.js里面设置打包排除项使用此配置项 config.plugin('html').tap(args => { isProd args[0].isProd = true return args }) 做数据的真假，对public/index.html的 cdn外链开发模式和发布模式的引入和隐藏。
复制链接

扫一扫