webpack排除打包webpack排除打包 CDN加速, 是一个比较好的方式 (一般要付费) , 一些开源的包, 有免

webpack排除打包

CDN加速, 是一个比较好的方式 (一般要付费) , 一些开源的包, 有免费服务: www.bootcdn.cn/

文件不是大吗？我们就不要把这些大的文件和那些小的文件打包到一起了，

像这种xlsx,element这种功能性很全的插件，我们可以放到CDN服务器上，

一来，减轻整体包的大小，二来 CDN 的加速服务可以加快我们对于插件的访问速度 使用方式
先找到 vue.config.js，添加 externals 让 webpack 不打包 xlsx 和 element
vue.config.js

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: {
    // key(要排除的包名), value(引入的CDN包的全局变量名)
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX',
    'moment': 'moment'
  },
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
},

再次运行，我们会发现包的大小已经大幅减小
注意: 此时由于排除了一些包, 所以代码是无法运行的! 必须配置 cdn 包的加载

CDN文件配置

const cdn = {
  css: [
    'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
  ],
  js: [
    // vue must at first!
    'https://unpkg.com/vue/dist/vue.js', // vuejs
    'https://unpkg.com/element-ui/lib/index.js', // element-ui js
    'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js',
    'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js',
    'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
  ]
}

但是请注意，这时的配置实际上是对 开发环境和 生产环境 都生效的，

在开发环境时，没有必要使用CDN，此时我们可以使用环境变量来进行区分

let externals = {}
let cdn = { css: [], js: [] }
const isProduction = process.env.NODE_ENV === 'production' // 判断是否是生产环境
if (isProduction) {
  externals = {
    // key(要排除的包名), value(引入的CDN包的全局变量名)
    'vue': 'Vue',
    'element-ui': 'ELEMENT',
    'xlsx': 'XLSX',
    'moment': 'moment'
  }
  cdn = {
    css: [
      'https://unpkg.com/element-ui/lib/theme-chalk/index.css' // element-ui css 样式表
    ],
    js: [
      // vue must at first!
      'https://unpkg.com/vue/dist/vue.js', // vuejs
      'https://unpkg.com/element-ui/lib/index.js', // element-ui js
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/jszip.min.js',
      'https://cdn.jsdelivr.net/npm/xlsx@0.16.6/dist/xlsx.full.min.js',
      'https://cdn.bootcdn.net/ajax/libs/moment.js/2.29.1/moment.min.js'
    ]
  }
}

底下使用 externals

configureWebpack: {
  // 配置单页应用程序的页面的标题
  name: name,
  externals: externals,
  resolve: {
    alias: {
      '@': resolve('src')
    }
  }
},

注入 CDN文件变量到模板

之后通过 html-webpack-plugin注入到 index.html之中:

chainWebpack(config) {
  // it can improve the speed of the first screen, it is recommended to turn on preload
  config.plugin('preload').tap(() => [
    {
      rel: 'preload',
      // to ignore runtime.js
      // https://github.com/vuejs/vue-cli/blob/dev/packages/@vue/cli-service/lib/config/app.js#L171
      fileBlacklist: [/\.map$/, /hot-update\.js$/, /runtime\..*\.js$/],
      include: 'initial'
    }
  ])

  // 注入cdn变量 (打包时会执行)
  config.plugin('html').tap(args => {
    args[0].cdn = cdn // 配置cdn给插件
    return args
  })
  
  ...
}

找到 public/index.html。通过你配置的CDN Config 依次注入 css 和 js。

<head>
  <!-- 引入样式 -->
  <% for(var css of htmlWebpackPlugin.options.cdn.css) { %>
    <link rel="stylesheet" href="<%=css%>">
  <% } %>
</head>

<!-- 引入JS -->
<% for(var js of htmlWebpackPlugin.options.cdn.js) { %>
  <script src="<%=js%>"></script>
<% } %>

最后，进行打包
npm run build

webpack排除打包

webpack排除打包

CDN文件配置

注入 CDN文件变量 到模板

注入 CDN文件变量到模板