vue项目打包时配置externals,忽略打包第三方库(前端性能优化方案)

在vue.config.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/[email protected]/lib/index.js'
  ],
  css: [
    'https://unpkg.com/[email protected]/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里这样写


<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%

你可能感兴趣的:(vue,web,javascript,网络优化,内存优化)