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

落日映苍穹つ 2024-04-07 15:28 70阅读 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){ %>
    
      
    
      <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>
    
      
    
      <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>
    
      
    
      <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>
        
        <% 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>
        
        <% 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%`**