vue项目中使用CDN引入大幅减小打包后体积

CDN（内容分发网络）指请求资源的方式，即通过script头去请求对应的脚本资源的一种方式，项目里配置之后不需要通过npm包管理工具去下载配置的包。

目的：将引用的外部js、css文件剥离开来，不编译到vendor.js中，而是用资源的形式引用，这样浏览器可以使用多个线程异步将vendor.js、外部的js等加载下来，达到加速首页展示效果。
首先创建一个引入element-ui的vue项目，对比两种方式打包后的大小

• 未配置cnd之前vendors.js文件大约是800k：
  

• 配置之后：vendors.js文件大约是80k
  

• 方法如下：

1. 在vue.config.js进行配置

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
        // vue: 'Vue',
        'element-ui': 'ELEMENT'
  }
  cdn = {
    css: [
        'https://unpkg.com/[email protected]/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
         'https://cdn.bootcdn.net/ajax/libs/vue/2.6.10/vue.min.js',
        'https://unpkg.com/[email protected]/lib/index.js' // element-ui js
    ]
  }
}
module.exports = {
    publicPath: './',
    outputDir: 'dist',
    assetsDir: 'static',
    productionSourceMap: false,
    devServer: {
        port: 8080,
        // 开启服务器后自动打开浏览器
        open: true,
        overlay: {
          warnings: false,
          errors: true
        }
    },
    configureWebpack: {
      // 在webpack的name字段中提供应用程序的标题，
      // 它可以在index.html中访问，以注入正确的标题。
        name: "test name",
        externals:  externals,
        resolve: {
          alias: {
            '@': resolve('src')
          }
        }
    },
    chainWebpack(config) {
        // 提高第一屏的速度，建议打开预加载
        config.plugin('preload').tap(() => [
          {
            rel: 'preload',
            fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
            include: 'initial'
          }
        ])
        config.plugin('html').tap(args => {
            args[0].cdn = cdn // 配置cdn给插件
            return args
        })
    }
}

• 2.在public/index.html文件配置

  
    
    
    
    
    
    
    <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
        
    <% } %>
    
    <% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
        
    <% } %>
  
  
    
    

    
  

增加引入样式和引入js两段即可

由于是多个任务异步进行加载，即使不使用CDN，服务器有条件的也可以将静态文件部署到自己服务器，首页加载速度也是能够有很明显的提升